31:T583,function fork_button() { return html``}32:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1593635254928.834,"size":2693}] 2f:{"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"},{"id":26,"value":"md`## Ejercicio a)`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":112,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof color_steps = slider({\n min: 0, \n max: 30, \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":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"// Ejemplo, se pueden definir colores mediante HEX, nombre, HSL, RGB/RGBA\nswatches([\"#ff3399\", \"hotpink\", \"hsl(330, 100%, 70.5%)\", \"rgba(128, 0, 128, 0.2)\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"// Resolución ejercicio a)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":147,"value":"// Resolución ejercicio b)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":141,"value":"// Resolución ejercicio c)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":187,"value":"// Resolución ejercicio d)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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 // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 110)\n .attr(\"y\", 175)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":220,"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 // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 110)\n .attr(\"y\", 175)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-hsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}