31:T40c,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height); // 2. Funciones para los ejes var xAxis = function (g) { return g.attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x)) } var yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y))} svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Dibujamos las barras svg.append("g") .attr("fill", "#ff006e") .selectAll("rect") .data(fruta) .enter() .append("rect") .attr("x", d => x(0)) .attr("y", d => y(d.nombre)) .attr("width", d => x(d.cantidad) - x(0)) .attr("height", d => y.bandwidth()); // n. Retornamos el canvas. return svg.node(); }32:T4b2,md`Hay muchos tipos de escalas en d3. La elegimos en base a la dimensión abstracta (cuantitativa/nominal) y el atributo perceptual (posición/color). En este caso, \`\`\`x\`\`\` es una [escala lineal](/@d3/d3-scalelinear) porque *cantidad* es una variable cuantitativa y queremos que la longitud de la barra sea propocional a ese valor. Por otro lado, utilizamos una [escala por bandas](/@d3/d3-scaleband) para \`\`\`y\`\`\`, ya que la variable *nombre* es nominal (los emojis de las frutas). Cada escala se configura mediante correspondencias por pares entre el dato (*dominio*) y el atributo perceptual (o *rango*). Por ejemplo, el valor inferior del dominio \`\`\`x(0)\`\`\` se asigna al valor inferior del rango \`\`\`x\`\`\` (el margen izquierdo del gráfico), mientras que el valor superior del dominio (el máximo) se asigna al valor superior del rango (el margen derecho). En las escalas lineales, el dominio y el rango son intervalos continuos (de *min* a *max*). En la escala por bandas, el dominio es un arreglo de valores discretos (🍊, 🍇, 🍏, ...) y su rango es un intervalo continuo. La escala por bandas determina automáticamente cómo dividir el rango en bandas discretas. `33:T8ba,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }34:T68f,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height) .style("font","10px sans-serif"); // 2. Funciones para los ejes var xAxis = function (g) { return g.attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x)) } var yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y))} svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Dibujamos las barras svg.append("g") .attr("fill", "#aaa") .selectAll("rect") .data(fruta) .enter() .append("rect") .attr("x", d => x(0)) .attr("y", d => y(d.nombre)) .attr("width", d => x(d.cantidad) - x(0)) .attr("height", d => y.bandwidth()); // 4. Dibujamos el texto (etiquetas de barra) svg.append("g").attr("transform", `translate(-6,15)`) .attr("fill", "#fff") .selectAll("text") .data(fruta) .enter() .append("text") .attr("x", d => x(d.cantidad)-10) .attr("y", d => y(d.nombre)) .text( d => d.cantidad); // 5. Dibujamos los puntitos svg.append("g") .selectAll("circle") .data(fruta) .enter() .append("circle") .attr("cx", d => x(d.cantidad)) .attr("cy", d => y(d.nombre)) .attr("r", d => 2.5); // n. Retornamos el canvas. return svg.node(); }35:T5c9,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height) .style("font","10px sans-serif"); // 2. Funciones para los ejes var xAxis = function (g) { return g.attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x)) } var yAxis = function (g) { return g.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y))} svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Dibujamos las barras svg.append("g") .selectAll("rect") .data(fruta) .enter() .append("rect") .attr("x", d => x(0)) .attr("y", d => y(d.nombre)) .attr("width", d => x(d.cantidad) - x(0)) .attr("height", d => y.bandwidth()) .style("fill", d => color(d.cantidad)); // <-- ESTA ES LA LINEA QUE HACE LA MAGIA // 4. Dibujamos el texto (etiquetas de barra) svg.append("g").attr("transform", `translate(-6,15)`) .attr("fill", "#fff") .selectAll("text") .data(fruta) .enter() .append("text") .attr("x", d => x(d.cantidad)-10) .attr("y", d => y(d.nombre)) .text( d => d.cantidad); // n. Retornamos el canvas. return svg.node(); }36:[] 2f:{"title":"2.2 Escalas y ejes","cells":[{"id":0,"value":"md`# 2.2 Escalas y ejes\n\nDe todas las herramientas de D3 para graficar datos, la más fundamental es la *escala*, que asigna una dimensión abstracta de datos a una variable visual.\n\nVeamos esto con un ejemplo de cantidades de fruta que compramos en la verdulería: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"fruta = [\n {nombre: \"🍊\", cantidad: 21},\n {nombre: \"🍇\", cantidad: 13},\n {nombre: \"🍏\", cantidad: 8},\n {nombre: \"🍌\", cantidad: 5},\n {nombre: \"🍐\", cantidad: 3},\n {nombre: \"🍋\", cantidad: 2},\n {nombre: \"🍎\", cantidad: 1},\n {nombre: \"🍉\", cantidad: 1}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`Normalmente pensamos en dimensiones con unidades espaciales, como posiciones, pero una dimensión abstracta no necesita ser espacial. Puede ser cuantitativa, como la *cantidad* de kilos de fruta, o puede ser nominal, como el *nombre* de cada fruta.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"fruta.map(d => d.cantidad) // cantidad de fruta, dimensión cuantitativa\n//fruta.map(function(d) { return d.cantidad; } ) // Esta linea es equivalente a la de arriba","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"fruta.map(d => d.nombre) // el nombre de cada fruta, dimensión nominal\n//fruta.map(function(d) { return d.nombre; } ) // Esta linea es equivalente a la de arriba","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`El siguiente gráfico de barras asigna dos dimensiones abstractas a dos variables visuales: la dimensión *nombre* se asigna a la posición de barras \\`\\`\\`y\\`\\`\\`, mientras que la dimensión *cantidad* se asigna a la posición \\`\\`\\`x\\`\\`\\`. Estas asignaciones se implementan mediante las escalas \\`\\`\\`x\\`\\`\\` e \\`\\`\\`y\\`\\`\\` que mostramos a continuación. El código de la generación del gráfico está oculto porque todavía no es necesario que comprendas todos sus elementos. De todas formas, podés mirarlo para ver como está construida la visualización.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`Modifiquen cualquiera de los parámetros en el código a continuación para ver el efecto que las escalas tienen sobre la gráfica. Por ejemplo, cambiá el valor de \\`\\`\\`.padding()\\`\\`\\` a 0.5: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"x = d3.scaleLinear() // Escala lineal\n .domain([0, d3.max(fruta, d => d.cantidad)])// requiere un dominio 0 -> max(cantidad)\n .range([margin.left, width - margin.right]) // y un rango en la gráfica: márgenes laterales","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"y = d3.scaleBand() // Escala por bandas\n .domain(fruta.map(d => d.nombre)) // requiere un dominio (nombres de frutas)\n .range([margin.top, height - margin.bottom]) // y un rango en la gráfica: márgenes sup/inf\n .padding(0.1) // Además, podemos especificar una separación ","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`Podemos obtener el dominio y el rango seteados en una escala:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`En resumen: ¿Qué son las escalas en D3? Son funciones. Al invocarlas obtenemos el atributo visual (como una posición x) correspondiente a un valor abstracto dado (como un nombre de fruta).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"y(\"🍇\") // La coordenada y de la fruta = uva","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"x(21) // la coordeanada x de la cantidad = 21","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`Por convención, para la mayoría de los gráficos utilizamos márgenes y dejamos cierto espacio para los ejes. Por lo tanto, \\`\\`\\`x(0)\\`\\`\\` no suele ser cero, sino una magnitud un poquito mayor: el tamaño del margen izquierdo. De la misma forma \\`\\`\\`y(0)\\`\\`\\` no suele ser cero, sino el tamaño del margen superior. Más adelante veremos más sobre márgenes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`La posición *xy* devuelta por estas escalas es un punto, como [*x* = 640, *y* = 30]. Pero como las barras tienen un ancho y una altura, esta posición corresponde a la esquina superior derecha de la barra (puntos negros):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`El ancho de la barra se puede calcular como \\`\\`\\`x(cantidad) - x(0)\\`\\`\\`, y su altura se define como \\`\\`\\`y.bandwidth()\\`\\`\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"x(21) - x(0) // el ancho de la barra correspondiente a cantidad = 21","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"y.bandwidth() // la altura de cada barra (o banda)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`Veamos algo más de las escalas. A continuación tenemos el código para construir una sola barra y controlar su ancho desde el slider. Noten que la funcion de escala \\`\\`\\`x()\\`\\`\\` es quien se encarga de transformar el entero especificado en cantidad, en una cantidad de píxels que pueda ser dibujada en pantalla:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof count = {\n const form = html``;\n form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"{\n // 1. Creación de un área de dibujo\n const svg = d3.create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",40)\n .style(\"font\",\"10px sans-serif\");\n \n // 2. Dibujamos la barra\n svg.append(\"g\") \n .attr(\"fill\", \"#ff006e\")\n .append(\"rect\")\n .attr(\"x\", x(0)) \n .attr(\"width\", x(count) - x(0)) \n .attr(\"height\", 33); \n \n // 3. Dibujamos el texto\n svg.append(\"g\").attr(\"transform\", `translate(-16,20)`) \n .attr(\"fill\", \"#fff\")\n .append(\"text\")\n .attr(\"x\", x(count)) \n .text(count); \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`Si bien la posición es un atributo perceptual muy fuerte, También podemos usar las escalas para otras variables visuales, como el color 🌈. Para eso D3 también nos provee funcionalidad: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"color = d3.scaleSequential() // Escala secuencial en d3\n .domain([0, d3.max(fruta, d => d.cantidad)]) // Rango: 0->max(cantidad)\n .interpolator(d3.interpolateRgb(\"green\", \"red\")) // Interpolar colores verde->rojo","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`El código anterior define una escala secuencial, que es similar a una escala lineal, excepto que en lugar de un rango se basa en un interpolador, es decir, una función que toma un valor entre 0 y 1 devolviendo el valor visual correspondiente. Este interpolador es uno de los [esquemas de color](/@d3/working-with-color) de D3.\n\nAl pasar una cantidad a esta escala, la función devuelve el color correspondiente:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"color(0) // El color para 0 (mínimo) es el verde rgb(0,128,0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"color(21) // El color para 21 (máximo) es el rojo rgb(255,0,0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`Ahora, podemos crear un grafico de barras incorporando también la información de la cantidad en forma de color:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md` Finalmente, podemos incoporar una leyenda con la escala del color importando el componente [legend](/@d3/color-legend). No es una primitiva de D3, pero alguien se tomó el trabajo de crearlo para nosotros en ese notebook. También podríamos crear uno nosotros mismos, con la forma y los parámetros que querramos utilizando estas mismas primitivas gráficas que vimos. Al fin y al cabo, todos son siempre componentes SVG. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"legend({color, title: \"Kg de fruta\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"height = 202","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}