2d:null 2e:["$","title",null,{"children":"2.5 TP-4: Carga de datos y escalas | Alejandro Viegener | Observable"}] 33:T568,{ // Canvas const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Dibujamos eje x svg.append("g") .call(xAxis); // Agregamos label a eje x svg.append("text") // text label for the x axis .attr("x", width/2) .attr("y", height - margin.bottom) .attr("font-size", "0.8em") .attr("dy", "2.8em") .style("text-anchor", "middle") .text("Longitud del sepalo [cm]"); // Dibujamos eje y svg.append("g") .call(yAxis); // Agregamos label del eje y svg.append("text") .attr("y", margin.left) .attr("x", -height/2) .attr("dy", "-2.8em") .attr("font-size", "0.8em") .attr("transform", "rotate(-90)") .style("text-anchor", "middle") .text("Longitud del petalo [cm]"); // Dibujamos los datos svg.append("g") .selectAll("circle") .data(datos_iris) .join("circle") .attr("cx", d => x(d.longitud_sepalo)) // la posición en x corresponde a longitud_sepalo .attr("cy", d => y(d.longitud_petalo)) // la posición en y corresponde a longitud_petalo .attr("r", 3) // el radio es fijo .attr("fill", d => species_to_color(d.especie)); // Retornamos el canvas. return svg.node(); }34:T5b2,{ // Canvas const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Dibujamos eje x svg.append("g") .call(xAxis); // Agregamos label a eje x svg.append("text") // text label for the x axis .attr("x", width/2) .attr("y", height - margin.bottom) .attr("font-size", "0.8em") .attr("dy", "2.8em") .style("text-anchor", "middle") .text("Longitud del sepalo [cm]"); // Dibujamos eje y svg.append("g") .call(yAxis); // Agregamos label del eje y svg.append("text") .attr("y", margin.left) .attr("x", -height/2) .attr("dy", "-2.8em") .attr("font-size", "0.8em") .attr("transform", "rotate(-90)") .style("text-anchor", "middle") .text("Longitud del petalo [cm]"); // Dibujamos los datos svg.append("g") .selectAll("circle") .data(datos_iris) .join("circle") .attr("cx", d => x(d.longitud_sepalo)) // la posición en x corresponde a longitud_sepalo .attr("cy", d => y(d.longitud_petalo)) // la posición en y corresponde a longitud_petalo .attr("r", d => petal_area_to_radius(d.area_petalo)) // radio del punto = f(area petalo) .attr("fill", d => petal_area_to_color(d.area_petalo)); // color del punto = f(area petalo) // Retornamos el canvas. return svg.node(); }35:T583,function fork_button() { return html``}36:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1593723260107.223,"size":2693}] 31:{"id":"621d2663dd882241","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"2.5 TP-4: Carga de datos y escalas","thumbnail":"1d4b230eafa1b70e7f72f2d6e5a6cf20d49eef30a7c04d730a33e980d09b1fae","access_level":"public","create_time":"$D2020-07-02T20:54:20.107Z","update_time":"$D2020-07-10T01:23:55.765Z","view_time":null,"first_public_time":"$D2020-07-03T17:54:18.389Z","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":"9d0491e782478e39","login":"alefiga","name":"Alejandro Viegener","avatar_url":"https://avatars-next.observableusercontent.com/e091cc47c3946ad58ec9a133af23f0935011f3060711f4f528896b1dc82d6970","tier":"starter_2024"},"version":933,"publish_version":933,"role":null,"authored":false,"authors":[{"type":"individual","id":"b390c233a35a408b","login":"alefiga","name":"Alejandro Viegener","avatar_url":"https://avatars-next.observableusercontent.com/e091cc47c3946ad58ec9a133af23f0935011f3060711f4f528896b1dc82d6970","tier":null}],"members":[{"type":"individual","id":"b390c233a35a408b","login":"alefiga","name":"Alejandro Viegener","avatar_url":"https://avatars-next.observableusercontent.com/e091cc47c3946ad58ec9a133af23f0935011f3060711f4f528896b1dc82d6970","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_1 = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 5, \n title: \"Cantidad de colores paleta 1\", \n description: \"Control para la cantidad de colores a visualizar en la paleta 1.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"{\n var colors = [\"#FF595E\", \"#FFCA3A\", \"#8AC926\", \"#1982C4\", \"#6A4C93\"]\n return swatches(colors.slice(0, color_steps_1))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"viewof color_steps_2 = slider({\n min: 2, \n max: 16, \n step: 1, \n value: 10, \n title: \"Cantidad de colores paleta 2\", \n description: \"Control para la cantidad de colores a visualizar en la paleta 2.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"{\n // Definimos un interpolador y cuantizamos en la cantidad de pasos segun slider\n var colorInterpolator = d3.interpolateRgbBasis([\"rgb(0,0,0)\", \"rgb(255,0,0)\", \"rgb(255,165,0)\"]);\n var colors = d3.quantize(colorInterpolator, color_steps_2);\n return swatches(colors)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof color_steps_3 = slider({\n min: 2, \n max: 16, \n step: 1, \n value: 10, \n title: \"Cantidad de colores paleta 3\", \n description: \"Control para la cantidad de colores a visualizar en la paleta 3.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"{\n // Definimos un interpolador y cuantizamos en la cantidad de pasos segun slider\n var colorInterpolator = d3.interpolate(\"rgba(240, 185, 138, 0.5)\", \"rgba(100, 55, 40, 0.85)\");\n var colors = d3.quantize(colorInterpolator, color_steps_3);\n return swatches(colors)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"viewof color_steps_4 = slider({\n min: 2, \n max: 16, \n step: 1, \n value: 10, \n title: \"Cantidad de colores paleta 4\", \n description: \"Control para la cantidad de colores a visualizar en la paleta 4.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"{\n // Definimos un interpolador y cuantizamos en la cantidad de pasos segun slider\n var colorInterpolator = d3.interpolate(\"hsl(234, 68%, 20%)\", \"hsl(200, 68%, 80%)\");\n var colors = d3.quantize(colorInterpolator, color_steps_4);\n return swatches(colors)\n}","pinned":true,"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: 100, \n title: \"Luminosidad\", \n description: \"Control para la luminosidad del color.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n // Definimos un interpolador y cuantizamos en la cantidad de pasos segun slider del ej a.4)\n // Definimos la luminosidad (0-100), según slider de ej b) \n var l = lum_steps/100;\n var colorInterpolator = d3.interpolate(`hsl(234, 68%, ${20*l}%)`, `hsl(200, 68%, ${80*l}%)`);\n var colors = d3.quantize(colorInterpolator, color_steps_4);\n return swatches(colors)\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":403,"value":"// Función para convertir una fila\n// - recibe una fila del dataset iris\n// - devuelve longitud_sepalo, longitud_petalo, area_petalo, especie\nfunction convertir_fila(fila) {\n \n fila.Sepal_Length = +fila.Sepal_Length; // convertimos a numerico\n fila.Petal_Length = +fila.Petal_Length; // convertimos a numerico\n fila.Petal_Width = +fila.Petal_Width; // convertimos a numerico\n \n var area_petalo = fila.Petal_Length * fila.Petal_Width / 2; // calculamos el area del petalo\n \n // Construimos la nueva fila y la retornamos\n var fila_nueva = { longitud_sepalo: fila.Sepal_Length,\n longitud_petalo: fila.Petal_Length,\n area_petalo: area_petalo.toFixed(3),\n especie: fila.Species };\n return fila_nueva;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// Cargamos los datos directamente desde la url y aplicamos convertis_fila a cada fila del dataset\ndatos_iris = {\n var csv = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv\", \n convertir_fila);\n return csv;\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":187,"value":"// Escala lineal, eje x\nx = d3.scaleLinear() \n .domain([d3.min(datos_iris, d=> d.longitud_sepalo) * 0.9, // * 0.9 para dejar un margen en el origen \n d3.max(datos_iris, d=> d.longitud_sepalo) * 1.1]) // * 1.1 para dejar un margen derecho \n .range([margin.left, width - margin.right]) // rango: margen izquierdo -> margen derecho","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"// Escala lineal, eje y\ny = d3.scaleLinear() \n .domain([ d3.min(datos_iris, d=> d.longitud_petalo) * 0.9, // * 0.9 para dejar un margen en el origen\n d3.max(datos_iris, d=> d.longitud_petalo) * 1.1]) // * 1.1 para dejar un margen superior\n .range([height - margin.bottom, margin.top]) // rango: margen sup. -> margen inf.","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":462,"value":"// Definimos el eje x\nxAxis = function (g) { return g.attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"// Definimos el eje y\nyAxis = function (g) { return g.attr(\"transform\", `translate(${margin.left}, 0)`) \n .call(d3.axisLeft(y))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"species_vis_colors = { return [ \"#FCBA04\", \"#2B4162\", \"#CA3C25\"] }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"species_name = {return [\"setosa\", \"virginica\", \"versicolor\" ]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"// Funcion que transforma la especie en un color\nspecies_to_color = function(especie) { \n if (especie == species_name[0]) \n return species_vis_colors[0];\n else if (especie == species_name[1]) \n return species_vis_colors[1];\n else\n return species_vis_colors[2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"legend({\n color: d3.scaleOrdinal(species_name, species_vis_colors),\n title: \"Especie\",\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$33","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":530,"value":"// Funcion que transforma el area del petalo en el radio del circulo\npetal_area_to_radius = function(area_petalo) { \n var radius = area_petalo * 0.9 + 0.5;\n return radius;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"// Funcion que transforma el area del petalo en un color\npetal_area_to_color = d3.scaleSequential([0, 10], d3.interpolateInferno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"legend({\n color: petal_area_to_color,\n title: \"Area de petalo\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$34","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":545,"value":"import {legend} from \"@d3/color-legend\"","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":"$35","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"},{"id":434,"value":"margin = ({top: 40, right: 40, bottom: 60, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"height = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"width = height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"