2d:null 2e:["$","title",null,{"children":"2.5 TP-4: Carga de datos y escalas | Arturo S. Lewinger | Observable"}] 33:T4f9,scatterplot= { // Canvas const svg = d3.create("svg") .attr("width", width) .attr("height", height-50); // Dibujamos eje x svg.append("g") .call(xAxis) // Dibujamos eje y svg.append("g") .call(yAxis); // Dibujo los circulos svg.append("g") .attr("fill", "steelblue") .selectAll("circle") .data(datos) .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 => color_especies(d)); // Add X axis label: svg.append("text") .attr("text-anchor", "middle") .attr("x", 180) .attr("y", height - 70) .text("Longitud del sépalo"); // Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("y", 30) .attr("x", -50) .text("Longitud del pétalo"); //titulo svg.append("text") .attr("x", width / 2+30 ) .attr("y", 20) .style("text-anchor", "middle") .text("Scatterplot: sépalo-pétalo"); return svg.node(); }34:T5aa,scatterplot2= { // Canvas const svg = d3.create("svg") .attr("width", width) .attr("height", height-50); // Dibujamos eje x svg.append("g") .call(xAxis) // Dibujamos eje y svg.append("g") .call(yAxis); // Dibujo los circulos svg.append("g") .attr("fill", "steelblue") .selectAll("circle") .data(datos) .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 => (d.area_petalo)*0.7 + 1) // el radio lo hago variable dependiente del valor de la columan área. La multiplicación por una constante más un monto fijo es por una cuestión méramente visual. .attr("fill", d => color_especies(d)) ; // Add X axis label: svg.append("text") .attr("text-anchor", "middle") .attr("x", 180) .attr("y", height - 70) .text("Longitud del sépalo"); // Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("y", 30) .attr("x", -50) .text("Longitud del pétalo"); //titulo svg.append("text") .attr("x", width / 2+30 ) .attr("y", 20) .style("text-anchor", "middle") .text("Scatterplot: sépalo-pétalo"); return svg.node(); }35:T583,function fork_button() { return html``}36:T664,function swatches2({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }37:[{"id":"6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","href":"https://static.observableusercontent.com/files/6906e5af9258daaf101879135fb50d66890e379fff35feeaf81eab658755d87ce8f7e401ef1b0ecce06004273eaf86a66dab0a6d1a840f5fadc506ce550a3d8b","name":"swatches.png","type":"image/png","lastModified":1593797346101.811,"size":2693},{"id":"1c5f05a69c1a5b6a3e02d1969b92bba04fdfeef04f4ad3c27bdaa285a7ae66169f0837744c36287661d497c72c7dfe80f8364481d7c4d690f754c8eb1a64188c","href":"https://static.observableusercontent.com/files/1c5f05a69c1a5b6a3e02d1969b92bba04fdfeef04f4ad3c27bdaa285a7ae66169f0837744c36287661d497c72c7dfe80f8364481d7c4d690f754c8eb1a64188c","name":"iris.csv","type":"text/csv","lastModified":1593973590430.96,"size":3716}] 31:{"id":"a11b946c59adb33b","slug":"2-5-tp-4-carga-de-datos-y-escalas","title":"2.5 TP-4: Carga de datos y escalas","thumbnail":"a05f0eab606983e2e78b3946c844e6d0db98434069207ca193669a34624ba372","access_level":"public","create_time":"$D2020-07-03T17:29:06.101Z","update_time":"$D2020-07-08T18:52:45.409Z","view_time":null,"first_public_time":"$D2020-07-08T18:52:47.618Z","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":"db43a29a63143203","login":"artur","name":"Arturo S. Lewinger","avatar_url":"https://avatars-next.observableusercontent.com/b41da1af77a3165a766daeeabbf15891bcababb7034fd6b642c9a6d0e30bd931","tier":"starter_2024"},"version":838,"publish_version":838,"role":null,"authored":false,"authors":[{"type":"individual","id":"16d39114330bfb4e","login":"artur","name":"Arturo S. Lewinger","avatar_url":"https://avatars-next.observableusercontent.com/b41da1af77a3165a766daeeabbf15891bcababb7034fd6b642c9a6d0e30bd931","tier":null}],"members":[{"type":"individual","id":"16d39114330bfb4e","login":"artur","name":"Arturo S. Lewinger","avatar_url":"https://avatars-next.observableusercontent.com/b41da1af77a3165a766daeeabbf15891bcababb7034fd6b642c9a6d0e30bd931","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: 5, // regulo el maximo de de la paleta al mostrado en el ejercicio\n step: 1, \n value: 10, \n title: \"Cantidad de colores 1º paleta\", \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":78,"value":"\n{// Defino los color en RBG\n var vector=[\"rgb(358, 65, 100)\", \"rgb(255, 202, 58)\", \"rgb(138, 201, 38)\", \"rgb(25, 130, 196)\", \"rgb(106, 76, 147)\"] // busque una paleta similar en https://coolors.co/ff595e-ffca3a-8ac926-1982c4-6a4c93\n return swatches(vector.slice(0,color_steps)) //con esta funci'on utilizo el vector anterior para pintar la cantidad que figure en el slider\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"viewof color_steps2 = slider({\n min: 0, \n max: 10, //A partir de ahora, para el resto de las paletas utilizaré el maximo de 10 para copiar el ejemplo dado.\n step: 1, \n value: 10, \n title: \"Cantidad de colores 2º paleta\", \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":336,"value":"paleta2={\n var interpolator = d3.interpolateRgbBasis([\"rgb(0, 0,0)\",\"rgb(255,0,0)\", \"rgb(254, 186, 43)\"]); // Esta función no solo permite partir del negro (RBG 0,0,0) y llegar al amarillo sino que agrega también la condición de pasar por el rojo\n var vector2= d3.quantize(interpolator, color_steps2);\n return swatches(vector2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"viewof color_steps3 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \n title: \"Cantidad de colores 3º paleta\", \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":"paleta3={\n var interpolator = d3.interpolateRgb(\"rgb(238, 197, 182)\",\"rgb(120, 71, 53)\");\n var vector3= d3.quantize(interpolator, color_steps3);\n return swatches(vector3)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof color_steps4 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \n title: \"Cantidad de colores 4º paleta\", \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":415,"value":"{\n var lumi = lum_steps\n var interpolator = d3.interpolateRgbBasis([\"hsl(238, 100%, 18%)\",\"hsl(191, 76%, 89%)\"]);\n var vector4= d3.quantize(interpolator, color_steps4);\n return swatches(vector4)\n}","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"{\n var lumi = (lum_steps/100)\n //var interpolator = d3.interpolate(`hsl(234, 68%, ${20*l}%)`, `hsl(200, 68%, ${80*l}%)`)\n var interpolator = d3.interpolate(`hsl(238, 100%, ${20*lumi}%)`,`hsl(191, 76%, ${80*lumi}%)`);\n var vector5= d3.quantize(interpolator, color_steps4);\n return swatches(vector5)\n}","pinned":false,"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":570,"value":"// Función para convertir una fila\nfunction convertir_fila(fila) {\n \n var area_petalo = fila.Petal_Length * fila.Petal_Width / 2; // calculo el area de cada pétalo\n \n // Construyo el nuevo dataframe, le doy formato número y lo devuelvo\n var nuevo_df = { longitud_sepalo: +fila.Sepal_Length,\n longitud_petalo: +fila.Petal_Length,\n area_petalo: +area_petalo.toFixed(3),\n especie: fila.Species };\n return nuevo_df;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"datos=d3.csvParse(await FileAttachment(\"iris.csv\").text(), convertir_fila) //aplico el convertir fila a los datos originales","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":"x = d3.scaleLinear() // Escala lineal en d3\n .domain([d3.min(datos, d => d.longitud_sepalo), d3.max(datos, d => d.longitud_sepalo)]) // requiere un dominio desde el largo del sepalo mínimo al máximo\n .range([margin.left, width - margin.right]) // y un rango en la gráfica con márgenes laterales","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"y = d3.scaleLinear() // Escala lineal en d3\n .domain([d3.min(datos, d => d.longitud_petalo), d3.max(datos, d => d.longitud_petalo)]) // requiere un dominio desde el largo del sepalo mínimo al máximo \n .range([height - margin.bottom, margin.top]) // y un rango en la gráfica, márgenes superior e inferior\n ","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":583,"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","output":"$undefined","database":"$undefined"},{"id":584,"value":"// Eje y, prueben el efecto de reemplazar {margin.left} por {width - margin.right}\n// y {d3.axisLeft(y)} por {d3.axisRight(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":587,"value":"// Pongo un color distinto a cada tipo de las 3 especies\ncolor_especies = function(d) { \n if (d.especie == \"setosa\") \n return \"#1f77b4\";\n else if (d.especie == \"versicolor\") \n return \"#ff7f0e\";\n else\n return \"#2ca02c\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"// hago una referencia para tipo de planta\nswatches2({\n color: d3.scaleOrdinal([\"setosa\", \"versicolor\", \"virginica\"], d3.schemeCategory10)\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":779,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"swatches2({\n color: d3.scaleOrdinal([\"setosa\", \"versicolor\", \"virginica\"], d3.schemeCategory10)\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"","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":655,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"height = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"width = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"margin = ({top: 20, right: 20, bottom: 120, left: 80})","pinned":true,"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":667,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"