2c:null 2d:["$","title",null,{"children":"TP-4 - Visualización de datos - Santiago Rossi | Santiago Rossi | Observable"}] 32:T583,function fork_button() { return html``}33:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1593888689205.638,"size":2693}] 30:{"id":"f1cacc08e74e4a97","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"TP-4 - Visualización de datos - Santiago Rossi","thumbnail":"78a8b0c6b2a7341ee402cc5e7766e410e67db8e47348e52266c86d2eb7103a45","access_level":"public","create_time":"$D2020-07-04T18:51:29.205Z","update_time":"$D2020-07-12T15:19:42.688Z","view_time":null,"first_public_time":"$D2020-07-10T21:22:23.545Z","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":"6c2779e13a13a526","login":"srossi","name":"Santiago Rossi","avatar_url":"https://avatars-next.observableusercontent.com/a930f8ef66e93a8572a31f4a168a365d27418db075ba5b0621c4109c465865f1","tier":"starter_2024","bio":""},"version":638,"publish_version":638,"role":null,"authored":false,"authors":[{"type":"individual","id":"71959648bbafd664","login":"srossi","name":"Santiago Rossi","avatar_url":"https://avatars-next.observableusercontent.com/a930f8ef66e93a8572a31f4a168a365d27418db075ba5b0621c4109c465865f1","tier":null,"bio":""}],"members":[{"type":"individual","id":"71959648bbafd664","login":"srossi","name":"Santiago Rossi","avatar_url":"https://avatars-next.observableusercontent.com/a930f8ef66e93a8572a31f4a168a365d27418db075ba5b0621c4109c465865f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TP-4 - Visualización de datos - Santiago Rossi","cells":[{"id":0,"value":"md`# TP-4 - Visualización de datos - Santiago Rossi`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Ejercicio a)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof color_steps = slider({\n min: 2, \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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// Ejemplo, se pueden definir colores mediante HEX, nombre, HSL, RGB/RGBA\n{\n const colores_1 = [\"#FF595E\", \"#FFCA3A\", \"#8AC926\", \"#1982C4\", \"#6A4C93\"] // Defino colores de la primer paleta\n\n return swatches(colores_1.slice(0, color_steps))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"{\n var colores_2 = d3.quantize(d3.interpolateRgbBasis([\"black\", \"red\",\"orange\"]), color_steps)\n return swatches(colores_2.slice(0, color_steps))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"// Resolución ejercicio a)\n{\n var colorInterpolator = d3.interpolate(\"rgb(238, 197, 182)\", \"rgb(120, 71, 53)\")\n //d3.quantize(colorInterpolator, color_steps)\n return swatches(d3.quantize(colorInterpolator, color_steps))\n //swatches([\"#ff3399\", \"hotpink\", \"hsl(330, 100%, 70.5%)\", \"rgba(128, 0, 128, 0.2)\"])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"// Resolución ejercicio a)\n{\n var colorInterpolator = d3.interpolate(\"rgb(0, 3, 92)\", \"rgb(204, 240, 248)\")\n //d3.quantize(colorInterpolator, color_steps)\n return swatches(d3.quantize(colorInterpolator, color_steps))\n //swatches([\"#ff3399\", \"hotpink\", \"hsl(330, 100%, 70.5%)\", \"rgba(128, 0, 128, 0.2)\"])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"viewof lum_steps = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 22, \n title: \"Luminosidad\", \n description: \"Control para la luminosidad del color.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"// Resolución ejercicio b)\n\n{\n var colorInterpolator = d3.interpolate(\"hsl(238, 100%, \" + `${lum_steps}` + \"%)\", \n \"hsla(191, 76%, \" + `${lum_steps+72}` + \"%)\")\n //d3.quantize(colorInterpolator, color_steps)\n return swatches(d3.quantize(colorInterpolator, 10))\n //swatches([\"#ff3399\", \"hotpink\", \"hsl(330, 100%, 70.5%)\", \"rgba(128, 0, 128, 0.2)\"])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// Resolución ejercicio c)\niris_df = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv\",d3.autoType)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"iris = iris_df.map((d) => ({\n longitud_sepalo: d.Sepal_Length, // Renombro Sepal_Length\n longitud_petalo: d.Petal_Length, // Renombro Sepal_Width\n especie: d.Species, // Renombro Species\n area_petalo: (d.Petal_Length * d.Petal_Width) / 2 // Creo area_petalo\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"width =350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"height =350\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"y = d3.scaleLinear() \n .domain([d3.min(iris,d => d.longitud_petalo), d3.max(iris,d => d.longitud_petalo)])\n .range([height - margin.bottom,margin.top]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"x = d3.scaleLinear() \n .domain([ d3.min(iris,d => d.longitud_sepalo),d3.max(iris,d => d.longitud_sepalo)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"// Resolución ejercicio d)\nmargin = ({top: 20, right: 20, bottom: 20, left: 40})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"yAxis = 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"xAxis = 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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\",560)\n .attr(\"height\",360);\n \n // Dibujamos eje x\n svg.append(\"g\") \n .call(xAxis)\n .selectAll(\"text\") \n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".8em\")\n .attr(\"transform\", \"rotate(-65)\" ); // prueben cambiar la rotación de la etiqueta\n \n // Dibujamos eje y\n svg.append(\"g\")\n .call(yAxis);\n \n // Dibujamos circulos\n svg.append(\"g\")\n \n .selectAll(\"circle\")\n .data(iris)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.longitud_sepalo))\n .attr(\"cy\", d => y(d.longitud_petalo))\n .attr(\"r\",3)\n .attr(\"fill\",d => colors_especie(d));\n \n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"colors_especie = function(d) { \n if (d.especie == \"setosa\") \n return \"red\";\n else if (d.especie == \"versicolor\") \n return \"blue\";\n else\n return \"green\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"colores_tamanio = d3.scaleSequential([d3.max(iris, d => d.area_petalo),d3.min(iris, d => d.area_petalo)], d3.interpolateInferno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"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\",560)\n .attr(\"height\",360);\n \n // Dibujamos eje x\n svg.append(\"g\") \n .call(xAxis)\n .selectAll(\"text\") \n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".8em\")\n .attr(\"transform\", \"rotate(-65)\" ); // prueben cambiar la rotación de la etiqueta\n \n // Dibujamos eje y\n svg.append(\"g\")\n .call(yAxis);\n \n // Dibujamos circulos\n svg.append(\"g\")\n \n .selectAll(\"circle\")\n .data(iris)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.longitud_sepalo))\n .attr(\"cy\", d => y(d.longitud_petalo))\n .attr(\"r\", d => d.area_petalo )\n .attr(\"fill\",d => colores_tamanio(d.area_petalo)); \n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-hsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"