2d:null 2e:["$","title",null,{"children":"2.5 TP-4: Carga de datos y escalas | Federico Poncio | Observable"}] 33:T451,{ // 1. Creación de un área de dibujo (350x350 pixeles). // Si lo consideran necesario, pueden modificar el tamaño del canvas. // También es posible que necesiten más de una celda para resolverlo. const svg = d3.create("svg") .attr("width",350) .attr("height",350); // Dibujamos eje x svg.append("g") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.18em") .attr("dy", ".50em") .attr("transform", "rotate(0)" ); // prueben cambiar la rotación de la etiqueta // Dibujamos eje y svg.append("g") .call(yAxis); var circulos = svg.selectAll("circle") .data(datos) .enter() .append("circle"); circulos.attr("cx", d => x(d.longitud_sepalo)) .attr("cy", d => y(d.longitud_petalo)) .attr("r" , function(d) {return 5*Math.sqrt(d.area_petalo/Math.PI);} ) .style("fill",function(d) {return color_area(d.area_petalo);}) // n. Retornamos el canvas. return svg.node(); }34:T583,function fork_button() { return html``}35:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1594076076098.886,"size":2693}] 31:{"id":"b4049da2ce89b271","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"2.5 TP-4: Carga de datos y escalas","thumbnail":"c8a6268303810dcc0e3506fd69185f269da74920b275fba52b1f5cefaacbb5f6","access_level":"public","create_time":"$D2020-07-06T22:54:36.098Z","update_time":"$D2020-07-21T21:24:09.355Z","view_time":null,"first_public_time":"$D2020-07-14T16:35:14.675Z","has_unpublished_edits":null,"fork":{"id":"063382471947291f","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"2.5 TP-4: Carga de datos y escalas","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4a0ce0da380945ac","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":"starter_2024"},"version":694,"publish_version":694,"role":null,"authored":false,"authors":[{"type":"individual","id":"278cf6c2b6cee181","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null}],"members":[{"type":"individual","id":"278cf6c2b6cee181","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2.5 TP-4: Carga de datos y escalas","cells":[{"id":0,"value":"md`# 2.5 TP-4: Carga de datos y escalas\n\nPor favor, para resolver los ejercicios del práctico utilizá este mismo notebook. Podés crearte una copia en tu propia cuenta de Observable haciendo click en ${fork_button()} (arriba a la derecha). Tus modificaciones a esa copia no afectarán el notebook original. Una vez terminado, no olviden apretar el botón ${publish_button()} (arriba a la derecha) para que el notebook sea público y podamos acceder para su corrección. Después de cada modificación que realicen al notebook deberán volver apretar el boton Publish si quieren que esa modificación se vuelva visible para cualquier otro usuario.\n\nEn este práctico vamos a trabajar con escalas, mapeos y carga de datos. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Ejercicio a)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`Usando [\\`d3.quantize\\`](https://observablehq.com/@d3/d3-quantize), el slider de cantidad de colores y los diferentes [interpoladores](https://observablehq.com/@d3/working-with-color) ofrecidos por d3, creen paletas como las que les proponemos en la figura a continuación. Para las paletas que no son secuenciales pueden utilizar [coolors.co](https://coolors.co/). Usen diferentes sliders para controlar cada una de las paletas por separado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof color_steps = slider({\n min: 0, \n max: 30, \n step: 1, \n value: 20, \n title: \"Cantidad de colores\", \n description: \"Control para la cantidad de colores a visualizar en la paleta.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"swatches(colores_disc2.slice(0, color_steps)) // hago el swatches \"cortando\" el array de colores por las primeras \"color_steps\"-entradas. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"swatches(colores)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"swatches(colores2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"swatches(colores3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"colorInterpolator = d3.scaleLinear() // armo el interpolador para los colores para la gama negro/rojo/naranja\n .domain([0, 0.5, 1])\n .range([\"black\", \"red\", \"orange\"])\n .interpolate(d3.interpolateRgb.gamma(2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"colores = d3.quantize(colorInterpolator, color_steps) // interpolo con la cantidad según el slider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"colores2 = d3.quantize(col2, color_steps) // interpolo la gama de marrones","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"col2 = d3.interpolate(clarito_lum, marron_lum) // creo el interpolador del marrón claro al oscuro (usa la luminancia)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"col3 = d3.interpolate(\"rgb(0, 0, 128)\", \"rgb(204, 243, 255)\") // interpolador del azul al celeste","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"colores3 = d3.quantize(col3, color_steps) // interpolo con color steps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"primeros = d3.schemeSet1 // defino un primer array de colores discretos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"segundos = d3.schemeCategory10 // defino un segundo array de colores discretos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"colores_disc = primeros.concat(segundos) // concateno ambos arrays discretos para tener más colores para el slider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"colores_disc2 = colores_disc.concat(colores_disc) // hago un array que repita el array anterior para duplicar la cantidad de colores ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`## Ejercicio b)\nPara alguna de las paletas anteriores (a elección), agregá un slider que permita controlar la luminosidad de todos los colores de la paleta (globalmente, no es necesario un control para cada color individualmente).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"viewof lum_steps = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10, \n title: \"Luminosidad\", \n description: \"Control para la luminosidad del color.\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"swatches(colores2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"clarito_rgb = [231, 190, 177] // hago arrays de colores base en caso de querer cambiarlos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"marron_rgb = [78, 37, 14]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"function lumosity(array_rgb,lumens){ // esta función le agrega una cierta cantidad al RGB\n var largo = array_rgb.length\n var colr = \"#\"\n for (var i = 0; i < largo; i++) {\n colr = colr + componentToHex(\n Math.round(\n Math.max(0,Math.min(\n array_rgb[i]+255*(lumens-50)/50,255))))\n }\n return colr\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"marron_lum = lumosity(marron_rgb,lum_steps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"clarito_lum = lumosity(clarito_rgb,lum_steps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"function componentToHex(input) { // cambia a hex un input RGB para hacer más fácil pasársela a la función.\n var hex = input.toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Ejercicio c)\nCarguen los datos del csv [de esta dirección](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv). Descarten los campos \\`Sepal_Width\\` y \\`Petal_Width\\`. Renombren \\`Sepal_Length\\`, \\`Petal_Length\\` y \\`Species\\` como \\`longitud_sepalo\\`, \\`longitud_petalo\\` y \\`especie\\` respectivamente. Además, agreguen un nuevo campo \\`area_petalo\\` con el área de cada pétalo calculada como: ${tex`\\frac{(Petal\\_Length \\times Petal\\_Width)}{2}`}.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"filename = \"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"datos = d3.csv(filename,convertir_fila)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"// Función para convertir una fila\nfunction convertir_fila(fila) {\n fila.area_petalo = Math.round(fila.Petal_Length*fila.Petal_Width*0.5*1000)/1000\n fila.longitud_sepalo = fila.Sepal_Length\n fila.longitud_petalo = fila.Petal_Length\n fila.especie = fila.Species\n delete fila.Sepal_Length\n delete fila.Petal_Length\n delete fila.Species\n delete fila.Sepal_Width\n delete fila.Petal_Width\n return fila;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`## Ejercicio d)\nCreen dos escalas, \\`x\\` e \\`y\\` (lineales) con dominio en la longitud de los sépalos y de los pétalos, respectivamente. Los rangos deberan corresponder a un gráfico cuadrado de 350 píxeles de lado (ancho y alto). ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"sepalo = d3.extent(datos, d => d.longitud_sepalo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"petalo = d3.extent(datos, d => d.longitud_petalo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"margin = ({top: 20, right: 10, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"width = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"height = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"x = d3.scaleLinear() // Escala lineal en d3\n .domain(sepalo) // requiere un dominio 0-> max(cantidad)\n .range([margin.left, width - margin.right]) // y un rango en la gráfica: márgenes laterales","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"y = d3.scaleLinear() // Escala lineal en d3\n .domain(petalo) // requiere un dominio 0-> max(cantidad)\n .range([width - margin.top,margin.bottom]) // y un rango en la gráfica: márgenes laterales","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`## Ejercicio e)\nReutilizando las escalas del punto anterior, graficar \\`longitud_sepalo\\` vs. \\`longitud_petalo\\` en un scatterplot. El color de cada punto (círculo) deberá indicar la especie a la que corresponde. Recuerden que pueden definir los ejes del gráfico automáticamente a partir de las escalas utilizando las funciones \\`\\`\\`d3.axisBottom(x) \\`\\`\\` y \\`\\`\\`d3.axisLeft(y)\\`\\`\\`. Ver [2.4 Gran final: Barras en d3](https://observablehq.com/@emmanueliarussi/2-4-gran-final-barras-en-d3?collection=@emmanueliarussi/dataviz2020). Recuerden agregar márgenes para que sea posible visualizar los ejes.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"{\n // 1. Creación de un área de dibujo (350x350 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\")\n .attr(\"width\",350)\n .attr(\"height\",350);\n \n // Dibujamos eje x\n svg.append(\"g\") \n .call(xAxis)\n .selectAll(\"text\") \n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.18em\")\n .attr(\"dy\", \".50em\")\n .attr(\"transform\", \"rotate(0)\" ); // prueben cambiar la rotación de la etiqueta\n\n // Dibujamos eje y\n svg.append(\"g\")\n .call(yAxis);\n \n var circulos = svg.selectAll(\"circle\")\n .data(datos)\n .enter()\n .append(\"circle\");\n circulos.attr(\"cx\", d => x(d.longitud_sepalo))\n .attr(\"cy\", d => y(d.longitud_petalo))\n .attr(\"r\" , 3 )\n .style(\"fill\",d => color(d.especie))\n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"xAxis = function (g) { return g.attr(\"transform\", `translate(5,${height - margin.bottom})`)\n .call(d3.axisBottom(x))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"yAxis = function (g) { return g.attr(\"transform\", `translate(${margin.left},-10)`) \n .call(d3.axisLeft(y))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"color = function (h) {\n if (h == \"setosa\") { return \"rgb(191, 78, 48)\"}\n if (h == \"versicolor\") { return \"rgb(54, 48, 32)\"}\n if (h == \"virginica\") { return \"rgb(51, 102, 153)\"}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"color(\"setosa\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Ejercicio f)\nSimilar al ejercicio anterior, pero esta vez el color y el radio de cada círculo en el scatterplot debe ser proporcional al campo de datos: \\`area_petalo\\`. Pueden crear la leyenda para la escala de colores [así](https://observablehq.com/@d3/color-legend).` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"areas = d3.extent(datos, function(d) {return 5*Math.sqrt(d.area_petalo/Math.PI);})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"color_area = d3.scaleSequential(areas, d3.interpolateInferno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-hsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"