2d:null 2e:["$","title",null,{"children":"2.5 TP-4: Carga de datos y escalas | Axel Mantalian | Observable"}] 33:T583,function fork_button() { return html``}34:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1594075329823.313,"size":2693}] 31:{"id":"5cf5ef3f0e25c03f","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"2.5 TP-4: Carga de datos y escalas","thumbnail":"8d854d6a7b495657d21b8ea163680e6c15f9ff822874ed7cabe2e067ab031a82","access_level":"public","create_time":"$D2020-07-06T22:42:09.823Z","update_time":"$D2020-07-07T22:07:21.458Z","view_time":null,"first_public_time":"$D2020-07-07T22:30:13.992Z","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":"9166d431dc9773a4","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","tier":"starter_2024"},"version":1027,"publish_version":1027,"role":null,"authored":false,"authors":[{"type":"individual","id":"90be2a40d323979f","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","tier":null}],"members":[{"type":"individual","id":"90be2a40d323979f","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","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":503,"value":"md`### Paleta 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof slider_1 = slider({\n min: 0, \n max: 5, \n step: 1, \n value: 5, \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":145,"value":"paleta_nominal = [\"#ef476f\",\"#ffd166\",\"#06d6a0\",\"#118ab2\",\"#073b4c\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"swatches(paleta_nominal.slice(0,slider_1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`### Paleta 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"viewof slider_2 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \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":347,"value":"swatches(paleta_bry)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"paleta_bry = d3.quantize(d3.interpolateRgbBasis([\"black\", \"red\", \"orange\"]),slider_2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"md`### Paleta 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"viewof slider_3 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \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":526,"value":"swatches(paleta_brown)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"paleta_brown = d3.quantize(d3.interpolateHcl(\"#eec5b6\", \"#784735\"), slider_3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`### Paleta 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"viewof slider_4 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \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":605,"value":"swatches(paleta_blue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"paleta_blue = d3.quantize(d3.interpolateHcl(\"#00035c\",\"#ccf0f8\"), slider_4)","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: 50, \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":"swatches(paleta_nominal.map(d => darken(d,-lum_steps)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"function darken(color, k = 1) {\n const {l, c, h} = d3.lch(color);\n return d3.lch(l - k/2, c, h);\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":"// Cargo los datos\ndatos_ejc_raw = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv\",d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"// Proceso campos y guardo en nueva variable\ndatos_ejc = datos_ejc_raw.map(elem => (\n { longitud_sepalo: elem.Sepal_Length, \n longitud_petalo: elem.Petal_Length, \n especie: elem.Species,\n area_petalo: (elem.Petal_Length * elem.Petal_Width) / 2 \n }\n )\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":688,"value":"// Defino escala para eje x\nescala_x = d3.scaleLinear()\n .domain([0, d3.max(datos_ejc, d => d.longitud_sepalo)])\n .range([margin.left, width - margin.right]) // x va de (margen izquierdo) -> (ancho - margen derecho)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"// Defino escala para eje y\nescala_y = d3.scaleLinear()\n .domain([0, d3.max(datos_ejc, d => d.longitud_petalo)])\n .range([height - margin.bottom, margin.top]) // y va de (altura - margen inferior) -> (margen superior)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"height = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"width = 350","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 \n const svg = d3.create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height);\n \n // Dibujamos eje x\n svg.append(\"g\") \n .call(xAxis)\n .selectAll(\"text\") \n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \".2em\")\n\n // Dibujamos eje y\n svg.append(\"g\")\n .call(yAxis);\n \n // Dibujamos los puntos\n svg.append('g')\n .selectAll(\"dot\")\n .data(datos_ejc)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => escala_x(d.longitud_sepalo) )\n .attr(\"cy\", d => escala_y(d.longitud_petalo) )\n .attr(\"r\", 2)\n .style(\"fill\", d => colores_especies(d.especie))\n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"legend({\n color: d3.scaleOrdinal([\"setosa\", \"versicolor\", \"virginica\"], [\"red\",\"green\",\"blue\"]),\n title: \"Especie\",\n width: 200,\n marginLeft: margin.left\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"// Función para obtener colores\n\ncolores_especies = function(especie) {\n\nif (especie == \"setosa\") { // setosa\n return \"red\"\n \n} else if (especie == \"versicolor\"){ // versicolor\n return \"green\"\n}\n\n return \"blue\" // si no es ninguna de las anteriores, es virginica\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"// Defino eje X en base a escala_x\nxAxis = function (g) { \n \n return g.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(escala_x))\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"// Defino eje Y en base a escala_y\nyAxis = function (g) { \n \n return g.attr(\"transform\", `translate(${margin.left},0)`) \n .call(d3.axisLeft(escala_y))\n}","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":"{\n // 1. Creación de un área de dibujo (350x350 pixeles).\n \n const svg = d3.create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height);\n \n // Dibujamos eje x\n svg.append(\"g\") \n .call(xAxis)\n .selectAll(\"text\") \n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \".2em\")\n\n // Dibujamos eje y\n svg.append(\"g\")\n .call(yAxis);\n \n // Dibujamos los puntos\n svg.append('g')\n .selectAll(\"dot\")\n .data(datos_ejc)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => escala_x(d.longitud_sepalo) )\n .attr(\"cy\", d => escala_y(d.longitud_petalo) )\n .attr(\"r\", d => escala_radio(d.area_petalo))\n .style(\"fill\", d => escala_color(d.area_petalo))\n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"legend({\n color: escala_color,\n title: \"Area pétalo\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"escala_radio = d3.scaleLinear()\n .domain([0, d3.max(datos_ejc,d => d.area_petalo)])\n .range([1,5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"escala_color = d3.scaleSequential()\n .domain([0, d3.max(datos_ejc,d => d.area_petalo)]).interpolator(d3.interpolateReds)","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":"$33","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":982,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"