2d:null 2e:["$","title",null,{"children":"Introducción a D3 | Alejandro Benito-Santos | Observable"}] 33:T6fa,md`### Una nota rápida sobre el código de este notebook. En este notebook, crearemos paso por paso una visualización sencilla (un gráfico de barras) empleando D3. Para poder ir renderizando los distintos pasos por separado en Observable, emplearemos una serie de técnicas. __Estas técnicas se emplean sólo para encadenar estas visualizaciones parciales y por lo tanto no necesitas usarlas en un notebook de verdad__. 1. Crearemos y recrearemos elementos locales en un objeto \`____\` que servirá como un pseudo espacio de nombres. Las variables usadas globalmente no serán alojadas en estos espacios de nombres. 2. Declararemos _selecciones D3 de elementos del DOM que serán reutilizadas_ en los espacios de nombres con el calificador [\`mutable\`](https://observablehq.com/@observablehq/introduction-to-mutable-state). _Este calificador es propio de Observable y no es un calificador normal de Javascript_. Por lo tanto, no necesitas entender exactamente cómo funciona, simplemente has de saber que nos permite definir una orden de dependencias para el renderizado y, en última instancia, el encadenado de snapshots sin que afecte a lo que hemos hecho antes. Cuando escribas tus visualizaciones en tus propios cuadernos, puedes omitir esta palabra clave. 3. Cuando definamos nuestros espacios de nombres, recrearemos todas las definiciones hechas hasta ese paso empleando el método helper \`cloneAndAppend\`. Tampoco necesitas saber exactamente cómo funciona este método. Simplemente, tienes que ser consciente de que copia elementos previamente definidos de tal manera que modificaciones subsecuentes en los mismos pueden ser propagadas a los estados de los pasos posteriores. Como ya supondrás, esto tampoco has de usarlo en tus visualizaciones.`34:Tf20,__complete_n__ = { const container = cloneAndAppend(mutable container); const chart = cloneAndAppend(mutable chart, container); const xaxis = cloneAndAppend(mutable xaxis, chart); const yaxis = cloneAndAppend(mutable yaxis, chart); const title = cloneAndAppend(mutable title, container); const ytitle = cloneAndAppend(mutable ytitle, chart); const xtitle = cloneAndAppend(mutable xtitle, chart); const legend = cloneAndAppend(mutable legend, chart); const enterbars = cloneAndAppend(mutable enterbars, chart); container.call(tip); enterbars.on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }); // dynamic legend legend .on('click', d => update(d, 0)) .style('cursor', 'pointer'); legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); function update(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // // Step 2. Join. // const bars = chart.selectAll('.bar') // .data(newData, (d) => { // if (d.year === state.year) { // // the age for the current year should match the age - step for the previous year. // return d.age_group - step; // } else { // return d.age_group; // } // }); // Step 2. Join. const bars = chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update legend legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); // update the year text document.getElementById('curr-year-complete').textContent = state.year; } return { container, chart, xaxis, yaxis, title, ytitle, xtitle, legend, enterbars, update }; }35:T558,md` La _ligadura de datos_ o _data binding_ es el paradigma de programación central de D3. Un _data binding_ informa a los elementos de la pagina de que hay datos disponibles: puedes pasar estos datos como un array o un objeto, y "ligarlos" (bind) a los elementos del DOM que hayas seleccionado previamente usando métodos como \`d3.selectAll()\`. He aquí un ejemplo: ~~~ js d3.selectAll('').data() ~~~ Qué está pasando aquí? * \`selectAll('')\` selecciona todos los elementos del _DOM_ y sus ligaduras de datos (en caso de que existan) en un contenedor dado (si usamos \`d3.selectAll\`, buscaremos en toda la página, y si hacemos \`chart.selectAll\`, se seleccionarán sólo elementos dentro del contenedor \`chart\`). De forma abstracta, el resultado de una selección que tiene datos ligados tendrá el siguiente aspecto: ~~~ [ { id: 0, element: , datum: }, { id: 1, element: , datum: } ... ] ~~~ * \`.data()\` _liga_ los datos (\`data\`) a los elementos seleccionados (reemplazando ligaduras previas en caso de existir) realizando lo que sería el equivalente de una operación 'join' de la selección y los datos. La clave usada para el join, por defecto, es simplemente el índice de cada registro (datum) de los datos. `36:T591,md`En un flujo de programación normal, la ligadura de datos se realiza en una serie de pasos (veremos más cuando hablemos sobre interacciones más tarde): 1. seleccionar (_select_) todos los elementos de la clase \`legend\` class empleando el método \`selectAll()\`. Ya que no hemos creado todavía ninguno, el resultado de invocar \`selectAll\` es el conjunto vacío. 2. ligar (bind) nuestros datos con \`.data()\` (en este caso, el dominio del atributo \`color\`, que se corresponde con los valores posibles de \`sex\`.) 3. invocar \`enter()\` para trabajar en el conjunto de datos que no tienen un elementos del DOM asociado. Cuando la seleccion sea el conjunto vacío, entonces el conjunto \`enter()\` será igual al de todos los datos de entrada, 4. añadir \`append()\` un nuevo elemento del DOM para cada registro del conjunto de entrada. Añadiremos un grupo \`g\` para cada posible valor de \`sex\` (y por lo tanto habrá dos grupos). 5. invocar \`attr()\` para cada elemento con funciones anónimas \`function(d, i)\` que serán aplicadas a los datos ligados para el conjunto sobre el que se esté operando (enter, udpate o exit). Estas funciones devolverán un valor que dependerá de dos parámetros \`d\` (el registro ligado) e \`i\` (el índice de dicho registro). En el ejemplo a continuación, usamos estos parámetros para definir una separación de 20 píxeles verticales entre los elementos \`g\`. `37:T671,md`Vamos a emplear nuestro conocimiento recién adquirido de \`enter()\` para comprender lo que está ocurriendo aquí. 1. \`chart.selectAll('.bar')\` selecciona todos los elementos del DOM (y sus ligaduras de datos, si es que existen) en el elemento \`chart\` con el atributo \`class = 'bar'\`. Debido a que aún no se han añadido este tipo de elementos, esta operación resulta en la selección del conjunto vacío. 2. \`\{...\}.data(filteredData)\` realiza el equivalente de la operación 'join' de BBDD entre el conjunto vacío seleccionado en el punto 1 y los datos filtrados por fecha y sexo. La clave que se usa para la operación de "join" es simplemente y por defecto, el índice de cada registro en los datos. Debido a que, en este punto, todos los registros no tienen ningún elemento del DOM asociado, el resultado de este join será __(a)__ un conjunto \`enter()\` que contiene todos los registros disponibles en los datos de entrada + las ligaduras a elementos (existentes o no) del DOM a cada uno de dichos registros, __(b)__ un conjunto \`update()\` vacío, y __(c)__ un conjunto \`exit()\` vacío. 3. \`.enter()\` simplemente selecciona el conjunto \`enter()\`. 4. \`append('rect')\` crea y añade un elemento del DOM (un 'rect') _para cada elemento del conjunto seleccionado_. En este caso, estaremos creando un rectángulo para cada fila en nuestro conjunto de datos filtrado \`filteredData\`. 5. \`attr('class', 'bar')\`, aplica el atributo \`class="bar"\` a cada elemento en nuestro conjunto de datos seleccionado. Ahora, si hiciésemos un \`.selectAll('.bar')\`, se nos darían todos los elementos que acabásemos de crear! `38:T50c,md`_Update_ puede ayudarnos a mostrar modificaciones de los datos en nuestra visualización sin tener que volver a renderizar toda la vista. Esto es especialmente útil a la hora de diseñar transiciones y animaciones. Debajo, vamos a implementar una función de actualización sencilla. Esta función hace diferentes tareas: 1. Toma un sexo y un incremento/decremento (+5, -5) y genera un nuevo subconjunto de datos ya filtrado. 2. Selecciona todos los elementos barra y hace el join con los nuevos datos (ya que no se define una función key de forma explícita, los registros se identifican únicamente por su posición dentro del conjunto de datos.) 3. Selecciona el conjunto \`update()\` (de manera implícita), y ajusta los atributos de cada barra (por ejemplo la altura) para que reflejen los nuevos datos. Ahora no se añaden nuevos datos ya que cada serie tiene el mismo número de elementos, simplemente se modifican atributos de las barras previamente añadidas. Las _transiciones (transition)_ nos permiten interpolar entre la apariencia antigua de una barra y la nueva en un intervalo de tiempo dado _duration_. Podemos darle un nombre único a una transición para identificarla posteriormente. Las transiciones con el mismo nombre tienen la propiedad de anularse entre sí.`39:T4d7,md`_Paso 2_. _Join_. De igual manera, seleccionaremos nuestras barras y las uniremos con los datos nuevos. _Sin embargo_, esta vez vamos a definir una función \`key\` para nuestros datos. Ya que queremos asociar un segmento de población de un lustro con el correspondiente en el lustro siguiente, seguiremos la siguiente lógica: Si \`step\` indica la dirección temporal hacia la que navegar, entonces un registro perteneciente al siguiente lustro (\`state.year\`) para un segmento de edad dado \`d.age_group\` debería asociarse con el registro del año anterior del segmento de edad \`d.age_group - step\`. Por ejemplo, si estamos cambiando de 1971-75 a 1976-1980, entonces la barra que representa a la población en el segmento de edad de 10 a 14 años en 1976-80 debería asociarse con la que representa al segmento de 5 a 9 en el lustro 1971-75. ~~~ js const bars = __update_better_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); ~~~ `3a:T5f8,function updateBetter(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __update_better_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update the year text document.getElementById('curr-year-better').textContent = state.year; }3b:T6b5,md`Vale. Ya tenemos el tooltip añadido a nuestra escena pero ahora, ¿cómo podemos hacer que se muestre? Como es lógico, tendremos que mostrarlo en respuesta a acciones del usuario. Para ello, tendremos que emplear el API para la escucha de eventos (event listeners) en el navegador de tal manera que cada vez que el cursor del ratón se posicione sobre una de las barras del gráfico, se muestren sus datos en un tooltip. Los event listeners pueden ser añadidos a elementos del DOM para responder a eventos empleando el método \`on()\`. Al método \`on()\` se le pasa una función anónima que se ejecutará de manera asíncrona (estas funciones en jerga JS son denominadas "callbacks") cada vez que ocurra el evento especificado. El parámetro de entrada de la función anónima representa el dato ligado al elemento en cuestión. El scope de la función, \`this\`, se corresponde al elemento en sí. (cuidado no usar aquí sintaxis ES6) Event listeners include: - \`mousedown\`: Invocado por un elemento sobre el que se ha pulsado un botón del ratón - \`mouseup\`: Invocado por un elemento sobre el que se soltado un botón del ratón - \`mouseover\`: Invocado por un elemento sobre el que se coloca el cursor del ratón - \`mouseout\`: Invocado por un elemento cuando el cursor del ratón sale de él - \`mousemove\`: Invocado por un elemento cuando el ratón se mueve sobre él - \`click\`: Invocado por un elemento cuando se dan los eventos mousedown y mouseup de manera secuencial sobre él - \`contextmenu\`: Invocado por un elemento sobre el que se hace click con el botón izquierdo - \`dblclick\`: Invocado por un elemento sobre el que se dan dos eventos de click es un espacio corto de tiempo `3c:T72f,function updateTooltipChart(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __tooltip_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update the year text document.getElementById('curr-year-tooltipchart').textContent = state.year; }3d:T436,__dynamic_legend_n__ = { const container = cloneAndAppend(mutable container); const chart = cloneAndAppend(mutable chart, container); const xaxis = cloneAndAppend(mutable xaxis, chart); const yaxis = cloneAndAppend(mutable yaxis, chart); const title = cloneAndAppend(mutable title, container); const ytitle = cloneAndAppend(mutable ytitle, chart); const xtitle = cloneAndAppend(mutable xtitle, chart); const legend = cloneAndAppend(mutable legend, chart); const enterbars = cloneAndAppend(mutable enterbars, chart); container.call(tip); enterbars.on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }); return { container, chart, xaxis, yaxis, title, ytitle, xtitle, legend, enterbars }; }3e:T863,function updateLegendV2Chart(sex, step) { // Step 1. Data. state.sex = sex; state.year += step; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); // Step 2. Join. const bars = __dynamic_legend_n__.chart.selectAll('.bar') .data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); // Step 3. Enter. bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .on('mouseenter', function(d) { // show the tooltip on mouse enter tip.show(d, this); d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) // Step 4. Update. bars .transition('update-transition') .duration(500) .attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); // update legend __dynamic_legend_n__.legend.selectAll('.legend-rect') .style('opacity', d => d === state.sex ? 1 : 0.5); __dynamic_legend_n__.legend.selectAll('.legend-text') .style('opacity', d => d === state.sex ? 1 : 0.5) .style('font-weight', d => d === state.sex ? 700 : 400); // update the year text document.getElementById('curr-year-dynamiclegend').textContent = state.year; }3f:[] 31:{"id":"b8e1c877a23b49d5","slug":"introduccion-a-d3","title":"Introducción a D3","thumbnail":"f993058e94f4014e97995cf8f9e30b702eaa028a2b96979c1263f877afc203b3","access_level":"public","create_time":"$D2019-10-29T17:11:29.959Z","update_time":"$D2019-12-03T09:24:24.104Z","view_time":null,"first_public_time":"$D2019-10-30T14:55:54.755Z","has_unpublished_edits":null,"fork":{"id":"eb1f180952359035","slug":"introduction-to-d3","title":"Introduction to D3","owner":{"id":"33e135341fd39b6b","login":"uwdata","name":"UW Interactive Data Lab"}},"stars":3,"starred":false,"owner":{"type":"team","id":"66257f7c1d7525fe","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":"starter_2024"},"version":3639,"publish_version":3639,"role":null,"authored":false,"authors":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null}],"members":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Introducción a D3","cells":[{"id":0,"value":"md`# Introducción a D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"md`Alejandro Benito-Santos. Adaptado de UW Interactive Lab`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Qué es d3.js?\n\n[D3](https://d3js.org) es un biblioteca Javascript para la visualización de datos. El paradigma central de D3 es ligar datos a elementos del DOM (Document Object Model) de una página web para dirigir el contenido y apariencia de dichos elementos (de ahí viene lo de **D**ata-**D**riven **D**ocuments!)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"md`\n## Recursos Adicionales\n\n- Interactive Data Visualization for the Web, 2nd Edition. Scott Murray. [versión online](http://explore.safaribooksonline.com/book/databases/business-intelligence/9781491921296) y [ejemplos en GitHub](https://github.com/alignedleft/d3-book/)\n- D3 v4 y v5 son más o menos compatibles. En [D3 Tips and Tricks v4.x](https://leanpub.com/d3-t-and-t-v4/read) puedes encontrar consejos útiles y ejemplos para ambas versiones.\n- Una [introducción a Observable y Javascript](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable).\n- [D3 Gallery](https://github.com/d3/d3/wiki/Gallery)\n- [https://bl.ocks.org/](https://bl.ocks.org/)\n- [Una recreación de la visualización de este cuaderno](https://observablehq.com/@haldenl/d3-tutorial).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2422,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2809,"value":"md`## Qué vamos a construir\n\nHe aquí un adelanto de la visualización que vamos a crear en este notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"__complete_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2763,"value":"viewof completeButtons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1971) {\n if (state.year == 2019)\n __complete_n__.update(state.sex, -3);\n else\n __complete_n__.update(state.sex, -5);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2019) {\n if (state.year == 2016)\n __complete_n__.update(state.sex, 3);\n else\n __complete_n__.update(state.sex, 5);\n }\n }\n \n const switchSexButton = html``;\n switchSexButton.onclick = () => __complete_n__.update(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n return view;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3048,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"md`Para crear una visualización, necesitamos obviamente algunos datos!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3420,"value":"census = d3.json(\"https://gist.githubusercontent.com/ale0xb/87ef67e49625ec02bc12231c478013b0/raw/79a65611c97814d426cb4f62f112bdc84eb1450a/censo.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`Cada 6 meses, el Instituto Nacional de Estadística (INE) publica datos sobre la demografía de la población española (población residente por fecha, sexo y edad). Hemos extraído los datos del último informe disponible (Octubre de 2019) que además contiene el histórico desde el año 1971 para crear una visualización interactiva que nos permita explorar el conjunto. \n\nHemos convertido los datos en un formato más conveniente (JSON) en el que se define una lista de objetos que describe a la población española en el período de tiempo 1971-2019. Además, hemos agregado los registros por lustros para facilitar la navegación.\n\nPuedes descargarte los datos originales [aquí](https://www.ine.es/jaxiT3/Tabla.htm?t=10256).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\nCada fila (u objeto) del conjunto de datos contiene las siguientes columnas (o campos):\n\n- \\`year\\`: El año del censo.\n- \\`age_group\\`: El segmento de edad, tomado en intervalos de 5 años. Se cubre desde los 0-4 años de edad hasta los mayores de 85.\n- \\`sex\\`: El sexo (binario en este caso): 1→hombre, 2→mujer.\n- \\`people\\`: El número de personas que componen el grupo en cuestión.\n\nAquí puedes ver las 10 primeras filas:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"printTable(census.slice(0, 20))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`Ahora empecemos a programar!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`Primero, tenemos que importar d3. El sufijo \\`@5\\` indica que queremos la versión 5.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## Create y Append`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`Primero, vamos a crear un \\`container\\` que albergará los componentes visuales que vamos a añadir.\n\nPara crear nuestro container, primero definimos el ancho y el alto, así como también los márgenes de nuestra visualización. Las dimensiones de nuestra visualización serán de \\`width\\` x \\`height\\`, con márgenes alrededor para hacer sitio a otros elementos como los ejes y el título.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"margin = ({\n top: 50,\n right: 50,\n bottom: 50,\n left: 100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`Nuestro contenedor será un elemento \\`svg\\` (**S**calable **V**ector **G**raphics). Podemos crear este elemento usando el método \\`create\\` de d3. Aquí aparece por primera vez el calificador \\`mutable\\` pero ¡no te asustes!. Como hemos comentado antes, está ahí sólo para que este tutorial funcione y no es necesario que lo incluyas en tu código.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"mutable container = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n\n/** In your notebook (without mutable):\n\ncontainer = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n \n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`Date cuenta de que hemos añadido \\`attr\\` (atributos) al elemento que acabamos de crear. Para una lista completa de atributos asignables a elementos svg, consulta la documentación [aquí](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`En este contenedor, podemos insertar nuestro gráfico (\\`chart\\`). Para ello, creamos un grupo, o sea, un elemento \\`g\\`, el cual es transladado dentro del área del \\`container\\` de tal manera que conseguimos el \\`margin\\` deseado. Aquí es donde los elementos gráficos ligados a nuestros datos residirán.\n\nWe add the created \\`g\\` using the \\`append()\\` function – it allows us to add new elements anywhere. We can also get rid of elements with \\`remove()\\`.\nComo ves, hemos creado el elemento \\`g\\` usando la función \\`append()\\`, que nos permite añadir nuevos elementos en cualquier lugar. También podemos deshacernos de elementos con \\`remove()\\`.\n\nPor último, almacenamos \\`chart\\` en una variable para reutilizarlo más adelante.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"mutable chart = (mutable container).append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n\n/** En tu notebook (sin \"mutable\"):\n\nchart = container.append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n \n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`Si renderizamos esto ahora, lo único que vemos es una gran rectángulo blanco:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`## Selecciones\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2582,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2550,"value":"__selections_n__ = {\n const container = cloneAndAppend(mutable container);\n\n const chart = cloneAndAppend(mutable chart, container);\n \n return {\n container,\n chart\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2800,"value":"md`_y ahora podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"\nmd`\\`append()\\` es parte de la familia de métodos de d3-selection, cuya finalidad es crear y acceder elementos de la página web.\n\n\\`d3.select()\\` and \\`d3.selectAll()\\` pueden ser usados para acceder a elementos por nombre (name), clase (class), id y otros muchos [selectores CSS](https://www.w3schools.com/cssref/css_selectors.asp). \\`d3.select()\\` selecciona sólo el primer elemento que coincide con el selector CSS proporcionado, mientras que \\`d3.selectAll()\\` selecciona todos los elementos coincidentes. Para seleccionar un elemento dentro de una selección ya definida (por ej., nuestro \\`container\\` o nuestro \\`chart\\`), podemos usar _selection_.\\`select()\\` or _selection_.\\`selectAll()\\`.\n\nPuedes acceder y modificar las propiedades de las selecciones con \\`attr()\\`, \\`text()\\`, \\`style()\\` y otros operadores. La mayoría de métodos de selección en d3 devuelven la selección, permitiendo encadenar las llamadas.\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`Vamos a tratar de modificar los atributos y estilos de \\`container\\` y \\`chart\\` para ayudarnos a definir sus posiciones. Debajo está lo que verías si:\n\n\n_Primero_. Nuestro \\`container\\` svg estuviese relleno con un rectángulo (\\`rect\\`) rosa. Fíjate en que aquí usamos \\`insert\\` antes de ':first-child' en vez de \\`append\\` para insertar el rectángulo como primer descendiente del contenedor de tal manera que no tape el grupo \\`chart\\`).\n\nRecuerda que estamos creando variables designadas para secciones específicas de este tutorial con los espacios de nombres \\`____\\` y por eso empleamos \\`__selections__\\`. _No_ necesitas hacer esto si estás desarrollando una visualización por ti mismo/a. Esto se hace aquí simplemente para permitir el buen funcionamiento de este notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"md`_Segundo_. Nuestro gráfico (seleccionado con el id \\`#chart\\`) tuviese una caja azul de dimensiones \\`width\\` por \\`height\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"__selections_n__.chart\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#42adf4');\n\n/** En tu notebook (sin \"namespace\"):\n ** Mismo chart declarado previamente!\n ** (En este notebook, si no usáramos el espacio de nombres aquí,\n ** también modificaríamos el render del paso previo.\n ** Pruébalo si tienes curiosidad!)\n \nchart\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#42adf4');\n \n*/\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3591,"value":"__selections_n__.container\n .insert('rect', ':first-child')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', '#ff96ca');\n\n/** En tu notebook (sin \"namespace\"):\n ** Mismo contenedor declarado previamente!\n ** (En este notebook, si no usáramos el espacio de nombres aquí,\n ** también modificaríamos el render del paso previo.\n ** Pruébalo si tienes curiosidad!)\n \ncontainer\n .insert('rect', ':first-child')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', '#ff96ca');\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"__selections_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"md`Fíjate en la diferencia entre los márgenes izquierdo y derecho. Estamos reservando espacio para añadir un eje a la izquierda más tarde.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`_Consejos_\n\n- El [repositorio de d3-selection](https://github.com/d3/d3-selection) es extremadamente útil!\n- Keep in mind that the origin for positioning elements is the upper left corner!\n- Recuerda que el origen de coordenadas para posicionar elementos se encuentra en la esquina superior izquierda!\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## Dominios\nAntes de que podamos empezar a pintar nuestros datos, necesitamos definir los dominios y escalas \\`x\\`, \\`y\\` y \\`color\\` para nuestro diagrama de barras.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`_Dominio de las edades_. Esto produce un array para todas las edades encontradas en los datos. \\`array.map\\` devuelve un array de idéntica longitud al proporcionado estableciendo una correspodencia entre los valores del array original y otros nuevos, que son computados por la función anónima dada. Por último, la función \\`unique\\` producirá un array de valores únicos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"ageDomain = unique(census.map((row) => { return row.age_group }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`_Dominio de las personas_. Queremos que el mínimo sea 0 y el máximo el número máximo de personas de todas las celda de nuestra tabla ya que vamos a hacer un diagrama de barras. La función anónima que pasamos a \\`d3.max\\` especifica cómo acceder a la cuenta de personas para un registro dado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"peopleDomain = [0, d3.max(census, row => row.people)];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`_Dominio del sexo_. La columna \\`sex\\` en nuestros datos codifica hombre como \\`1\\` y mujer como \\`2\\`, y por lo tanto en este caso podemos usar estos valores directamente como dominio para representar el sexo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"sexDomain = [1, 2];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## Escalas\n\nUsando los dominios que acabamos de comentar, podemos ahora definir escalas para nuestros canales visuales.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`Las _escalas_ son funciones que establecen una correspondencia entre un valor en un dominio y otro valor en un rango (un rango es el dominio del gráfico). \\`d3\\` cuenta con múltiples funciones de escala que podemos usar para crear nuestras escalas. Antes de lanzarnos a ello, veamos como son las funciones que vamos a usar:\n\n- \\`d3.scaleLinear()\\` crea un correspondencia lineal entre un dominio y un rango continuos. También tenemos \\`d3.scaleLog()\\`, \\`d3.scaleSqrt()\\` y similares. \n- \\`d3.scaleOrdinal()\\` especifica una correspondencia explícita entre un conjunto de valores discretos ordenados y otro conjunto de atributos visuales (como colores). \n- \\`d3.scaleBand()\\` establece un correspondencia de un dominio discreto a un rango continuo diviendo el rango continuo en bandas uniformes. Las escalas de banda se emplean habitualmente en diagramas de barras con una dimension ordinal o categórica (como nuestro campo \\`age\\`).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`Queremos visualizar \\`age\\` en el eje \\`x\\`. Usamos una escala ordinal para proyectar los datos a la coordenada \\`width\\`. \\`range\\` un intervalo en el espacio de la visualización, y \\`domain\\` denota un intervalo en el espacio de los datos. Recuerda que esto es precisamente lo que hacen las escalas: toman un valor en un dominio (por ej., edad) y devuelven su contraparte en un rango de una variable visual i.e., position: \\`x = f(age) => position\\`.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"x = d3.scaleBand().rangeRound([0, width])\n .padding(0.1)\n .domain(ageDomain);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`Análogamente, queremos una escala cuantitativa para el eje \\`y\\` que muestre la población para cada lustro. Nuestro rango aquí va de \\`height\\` a \\`0\\` (y no de \\`0\\` a \\`height\\`). ¿Por qué?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"y = d3.scaleLinear()\n .range([height, 0])\n .domain(peopleDomain);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`Por último, codificaremos la variable \\`sex\\` al canal del color. Primero definimos los colores que representarán los sexos masculino y femenino respectivamente y los definimos como el rango de una escala ordinal. No nos complicaremos mucho por el momento y emplearemos una codificación bastante convencional: azul para el género masculino y rosa para el femenino pero te debería ser fácil cambiarlos por otros si así lo crees oportuno.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = {\n const maleColor = '#42adf4';\n const femaleColor = '#ff96ca';\n\n // create a scale function that maps 1 to the male color and 2 to the female color\n return d3.scaleOrdinal()\n .range([maleColor, femaleColor])\n .domain(sexDomain);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`_Consejos adicionales:_ D3 también admite escalas temporales como \\`d3.scaleTime()\\`, y contiene escala de colores \"seguras\" como \\`d3.schemeCategory10()\\` (para no tener que definir las escalas manualmente como hemos hecho en este notebook). Échale un ojo al repositorio de [escalas de d3](https://github.com/d3/d3-scale) para obtener más información.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`## Ejes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2595,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2543,"value":"__axes_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n\n return {\n container,\n chart,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2797,"value":"md`_y ahora podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`Con las escalas definidas, podemos añadir los ejes correspondientes a nuestro container svg. \n\nLos ejes pueden ser generados basándonos en las escalas de la visualización (de hecho, la mayoría de las veces lo harás así.) Los ejes se definen en base a su posición usando funciones generadores de ejes propias de d3: \\`d3.axisTop()\\`, \\`d3.axisBottom()\\`, \\`d3.axisRight()\\`, or \\`d3.axisLeft()\\`.\n\nPara crear un eje, tenemos que crear o seleccionar primero el elemento en el que queremos colocarlo y después invocar el método \\`call()\\` para aplicarle nuestro eje recién generado usando el generador correspodiente.\n\nConsulta la página de [ejes de d3](https://github.com/d3/d3-axis) para más información\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"mutable xaxis = __axes_n__.chart\n .append('g')\n .attr('class', 'axis axis--x')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(x));\n\n/** En tu notebook (sin \"mutable\" ni \"namespace\"):\n\nxaxis = chart\n .append('g')\n .attr('class', 'axis axis--x')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(x));\n\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"mutable yaxis = __axes_n__.chart\n .append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(y));\n\n/** En tu notebook (sin \"mutable\" ni \"namespace\"):\n\nyaxis = chart\n .append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(y));\n\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`Nuestro contenedor ahora muestra los ejes x e y!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"__axes_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`## Títulos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2607,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2529,"value":"__titles_n__ = {\n const container = cloneAndAppend(mutable container);\n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2794,"value":"md`_y ahora podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`En D3, los generadores de ejes no crean los títulos correspondientes de manera automática. Sim embargo puedes añadir manualmente _etiquetas_ a tus ejes (o a otros elementos) añadiendo marcas de texto en svg. Como ocurre con cualquier otra marca, puedes especificar programáticamente los atributos HTML y los estilos CSS correspondientes.\n\nVamos a añadir títulos para el gráfico y los ejes x e y.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"// make the font consistent\n__titles_n__.container.selectAll('text').style(\"font-family\", \"sans-serif\");\n\n/** En tu notebook (sin \"namespace\"):\n\ncontainer.selectAll('text').style(\"font-family\", \"sans-serif\");\n\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"mutable title = __titles_n__.container.append(\"text\")\n .attr(\"transform\", `translate(${(width + 50+ margin.left + margin.right)/2},20)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-weight\", 700)\n .text(\"Datos Censales por Grupo de Edad y Sexo\");\n\n\n/** En tu notebook (sin \"mutable\" ni \"namespace\"):\n\ntitle = container.append(\"text\")\n .attr(\"transform\", `translate(${(width + margin.left + margin.right)/2},20)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-weight\", 700)\n .text(\"Datos Censales por Grupo de Edad y Sexo\");\n\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"// text label for the y axis\nmutable ytitle = __titles_n__.chart.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 0 - margin.left)\n .attr(\"x\", 0 - (height / 2))\n .attr(\"dy\", \"1em\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Población\");\n\n/** Ya sabes. En tu notebook puedes ignorar \"mutable\" y \"__titles__\".\n ** A partir de ahora ya no te lo recordaremos más así que presta atención!. */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"// text label for the x axis\nmutable xtitle = __titles_n__.chart.append(\"text\") \n .attr(\"transform\", `translate(${(width/2)}, ${(height + margin.top - 10)})`)\n .style(\"text-anchor\", \"middle\")\n .text(\"Grupo de Edad\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"__titles_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"md`## Leyendas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2517,"value":"__auto_legend_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2791,"value":"md`_y ahora podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md`De manera similar a lo que hemos hecho con los ejes, ahora vamos a construir _leyendas_. Vamos a usar la biblioteca [\\`d3-legend\\`](https://d3-legend.susielu.com/#summary) para crearlas de manera automática.\nOjo: A diferencia de d3-axis o d3-selection, d3-legend no es parte del núcleo de d3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"legend_auto = d3Legend\n .legendColor()\n .scale(color)\n .orient(\"vertical\")\n .shapePadding(10)\n .labels([\"Hombres\", \"Mujeres\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`Como hicimos con los ejes, podemos añadir las leyendas a nuestro gráfico empleando la función \\`call()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":"__auto_legend_n__.container.append(\"g\")\n .attr(\"class\", \"legend_auto\")\n .style('font-size', 12)\n .style('font-family', 'sans-serif')\n .attr(\"transform\", \"translate(650, 100)\")\n .call(legend_auto)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`Mira ahora cómo queda el contenedor con los títulos y la leyenda de color:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"__auto_legend_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`Ahora que hemos configurado el marco de nuestro gráfico, es hora de mostrar los datos!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"md`## Ligaduras de Datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"md`El resultado de una ligadura son tres conjuntos de pares de _elementos + datos.\n\n1. \\`enter()\\`: El conjunto de _datos_ que _no tienen elementos del DOM_ asociados.\n2. \\`update()\\*\\`: El conjunto de elementos del DOM que _ya tenían datos_ asociados (\\* nota: esto es un conjunto implícito. Este conjunto se modificará por defecto de no seleccionarse \\`enter()\\` o \\`exit()\\` después de llamar a \\`data()\\`.\n3. \\`exit()\\`: El conjunto de _elementos del DOM_ que _no_ tienen datos asociados.\n\nPara ayudarte a recordar, siempre que pienses en selecciones...piensa en que son simétricas! \nTambién hay un cuarto conjunto de apoyo, \\`merge()\\`, que es la unión de los conjuntos \\`enter()\\` y \\`update()\\`.\n\n¿No quedó muy claro? No te preocupes, vamos a visitar cada uno de estos conceptos en las celdas a continuación. 👇\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`### Ligaduras de datos nivel básico: Recrear las leyendas de forma manual con \\`enter()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2627,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2503,"value":"__manual_legend_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2788,"value":"md`_y ahora ya podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2620,"value":"md`Para poner un primer ejemplo sencillo de ligadura de datos, vamos a recrear la leyenda de manera manual. Vamos a hacerlo creando nuevos elementos del DOM usando el conjunto \\`enter()\\`. En realidad, las leyendas son como cualquier otro elemento de tu visualización y siguen los mismos Manual legends are just like the other elements of your visualization y pueden ser creadas empleando una nuevo conjunto de elementos svg a los que se les asociarán datos y, en última instancia, escalas que ayudarán a codificar dichos datos en los atributos visuales de los elementos.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"mutable legend = __manual_legend_n__.chart\n .selectAll(\".legend\") // paso 1\n .data(color.domain()) // paso 2\n .enter() // paso 3\n .append(\"g\") // paso 4\n .attr(\"class\", \"legend\") // paso 5\n .attr(\"transform\", function(d, i) { // paso 5\n // i is the index\n return `translate(0, ${i * 20})`; \n })\n .style('font-family', 'sans-serif');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`Ahora podemos añadir más elementos al grupo \\`g\\`. Al añadir elementos a \\`legend\\`, se establece automáticamente una correspondencia entre estos y cada registro en \\`color.domain()\\`. Por lo tanto, tendremos dos elementos \\`rect\\` (rectángulos) en total, uno para cada sexo. Dentro del \\`g\\` de cada sexo, ambos \\`rect\\`s son colocados en la posición (x=360, y=65). Como cada elemento \\`g\\` tiene un offset de 20 píxeles, entonces también tendremos un espacio vertical de 20 píxeles entre los rectángulos. Si conoces HTML, esto es análogo a heredar el padding de los contenedores ascendientes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"mutable legend.append(\"rect\")\n .attr('class', 'legend-rect')\n .attr(\"x\", width + margin.right-12)\n .attr(\"y\", 65)\n .attr(\"width\", 12)\n .attr(\"height\", 12)\n .style(\"fill\", color);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`De manera análoga, podemos añadir texto para crear las etiquetas de la leyenda, que definiremos como \"hombre\" o \"mujer\" en vez de usar los números 1 y 2 que serían bastante poco informativos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"mutable legend.append(\"text\")\n .attr('class', 'legend-text')\n .attr(\"x\", width + margin.right-22)\n .attr(\"y\", 70)\n .style('font-size', \"12px\")\n .attr(\"dy\", \".35em\")\n .style(\"text-anchor\", \"end\")\n .text(function(d) { return d === 1 ? 'Hombres' : 'Mujeres'; });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"__manual_legend_n__.container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`\n### Creando barras con Enter\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2634,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2483,"value":"__bars_enter_namespace__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2821,"value":"md`_y ahora ya podemos continuar_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2630,"value":"md`Como ya sabemos como añadir elementos empleando ligaduras de datos, vamos a emplear la misma técnica que hemos usado con la leyenda para crear las barras de nuestro diagrama.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"md`Para comenzar, supón que nos interesa ver la distribución de población para un lustro (\\`1971-75\\`) y un sexo (\\`2 = female\\`) dados. Podemos definir estos valores en un objeto \\`state\\`, que será el que manipularemos más tarde`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"state = ({year: 1971, sex: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`Para filtrar nuestros datos, vamos a definir una función que acepta una fila o registro y devuelve un booleano si cumple con los criterios dados.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`\\`{ \"year\": 1971, \"age_group\": 0, \"sex\": 2,\"people\": 1564137 }\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function isYearAndSex(row, year, sex) {\n return row.year === year && row.sex === sex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"filteredData = census.filter(row => isYearAndSex(row, state.year, state.sex));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"printTable(filteredData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"md`Con los datos ya filtrados, ya podemos efectuar una ligadura.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"bars = __bars_enter_namespace__.chart.selectAll('.bar').data(filteredData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"md`La selección de barras (elementos de clase \".bar\") mediante \\`selectAll\\` resultará en el conjunto vacío debido a que hasta este punto aún no se había añadido ninguna. Esto significa que todos los registros de entrada disponibles estarán en el conjunto \\`.enter()\\` de la ligadura.\n\nAhora, para todos los elementos en el conjunto \\`.enter()\\`, añadiremos un rectángulo \\`rect\\` de tamaño y posición apropiadas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"mutable enterbars = bars\n .enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', (d) => x(d.age_group))\n .attr('y', (d) => y(d.people))\n .attr('width', x.bandwidth())\n .attr('height', (d) => height - y(d.people))\n .attr('fill', (d) => color(d.sex));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"md`Los atributos visuales de cada barra son calculados como sigue:\n\n* Su posición x es una función cuyo resultado depende del valor del atributo \\`age_group\\` del registro \\`d\\`. Ya hemos creado esta función, es la escala del eje \\`x\\`!\n* Su posición y es una función cuyo resultado depende del valor del atributo \\`people\\`. Esta función es nuestra escala \\`y\\`.\n* El ancho de cada banda es el \\`bandwidth\\` de la escala ordinal (el espacio reservado para cada columna).\n* Su alto es la distancia entre su posición y inicial y el 'fondo' del gráfico, donde reside el eje x. Recuerda que el (0, 0) está en la esquina superior izquierda, así que la posición y de \\`height\\` es nuestro 'fondo'.\n* El color de relleno lo da una función que depende del valor del atributo \\'sex\\' del registro \\`d\\` asociado a la barra, que es finalmente determino por nuestra escala \\`color\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`Enhorabuena! Hemos creado la versión estática de la visualización! Fíjate en que este gráfico de barras sólo muestra la distribución de población de un lustro (1971-75) y un sexo (mujer). En la próxima sección, vamos a ver cómo podemos incorporar _interacción_ en nuestra visualización para permitir a los usuarios cambiar el criterio de filtrado que se aplica a los datos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"__bars_enter_namespace__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`### Creando una visualización dinámica con Update`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2649,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2398,"value":"__update_naive_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2782,"value":"md`_y continuamos._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2646,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"function updateNaive(sex, step) {\n // Paso 1\n state.year += step;\n state.sex = sex;\n const newData = census.filter(row => isYearAndSex(row, state.year, state.sex));\n \n // Paso 2\n const bars = __update_naive_n__.chart.selectAll('.bar')\n .data(newData);\n \n // Paso 3\n bars\n .transition('update')\n .duration(500)\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex));\n \n document.getElementById('curr-year-naive').textContent = state.year;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"__update_naive_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"viewof timeButtonsNaive = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1971) {\n if (state.year == 2019)\n updateNaive(state.sex, -3);\n else\n updateNaive(state.sex, -5);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2019) {\n if (state.year == 2016)\n updateNaive(state.sex, 3);\n else\n updateNaive(state.sex, 5);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateNaive(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n \n return view;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`Ahora podemos navegar a través de todos los lustros disponibles en nuestro conjunto de datos y visualizar la distribución de población para ambos sexos!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`### Comunicando movimiento en el tiempo con Enter + Update + Exit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2663,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2656,"value":"__update_better_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2779,"value":"md`_ahora podemos continuar._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2660,"value":"md`Mientras que nuestro simple método de actualizar los datos en base a la selección del usuario cubre el escenario más básico de interacción, hay aún margen de mejora. Recuerda que los datos del censo vienen dados con una resolución de año. Esto significa que la población que se encuentra en el rango de edad de 0 a 5 años en un lustro, en el siguiente se encontrará en el rango de 5 a 10. Por desgracia, nuestra implementación básica de \"update\" no refleja esta idea! Las barras crecen y decrecen, pero sin conocer muy bien el conjunto de datos, resulta difícil ver cómo la población va envejeciendo a lo largo de los años.\n\nSin embargo, esto tiene solución: Podemos combinar _enter_, _update_, y _exit_ para conseguir este efecto mediante animaciones. He aquí cómo lo haremos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md`_Paso 1_. _Datos_. Tal como hicimos antes, las acciones del usuario modificarán un objeto de estado que a su vez servirá para filtrar los datos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"md`_Step 3_. _Enter_. Si estamos yendo hacia adelante en el tiempo, nuestro conjunto \\`enter()\\` contendrá el grupo de edad de 0 a 5 años, debido a que esas personas todavía están por nacer. Por lo tanto, deberíamos añadir nuevas barras para estos datos y animar su entrada en escena. \n\n~~~ js\n bars.enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(0))\n .attr('width', x.bandwidth())\n .attr('height', 0)\n .attr('fill', d => color(d.sex))\n .on('mouseenter', function(d) {\n // show the tooltip on mouse enter\n updateBetterTip.show(d, this);\n d3.select(this).style('opacity', 0.7);\n })\n .on('mouseout', function(d) { \n // hide the tooltip on mouse out\n updateBetterTip.hide();\n d3.select(this).style('opacity', 1)\n })\n .transition('enter-transition')\n .duration(500)\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"md`\n_Paso 4_. _Update_. Ahora, necesitamos mover las barras de nuestro conjunto \\`update()\\` a su nueva posición en el eje \\`x\\` y ajustar su altura adecuadamente.\n\n~~~ js\n bars\n .transition('update-transition')\n .duration(500)\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex));\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"md`_Paso 5_. _Exit_. De manera análoga al paso 3, si estamos retrocediendo en el tiempo, nuestro conjunto \\`exit()\\` contendrá el grupo de edad de mayores de 85 años. Por lo tanto, este grupo ha de desaparecer de pantalla ya que será reemplazado por el grupo de 80 a 84 años de edad del estado anterior.\n\n~~~ js\n bars.exit()\n .transition('exit-transition')\n .duration(500)\n .attr('height', 0)\n .attr('y', y(0))\n .remove();\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"__update_better_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof timeButtonsBetter = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1971) {\n if (state.year == 2019)\n updateBetter(state.sex, -3);\n else\n updateBetter(state.sex, -5);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2019) {\n if (state.year == 2016)\n updateBetter(state.sex, 3);\n else\n updateBetter(state.sex, 5);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateBetter(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n \n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"md`Y con esto terminamos esta introducción a los conceptos básicos de D3! 🏄‍♀️🏄‍\n\nNo es suficiente? Continua leyendo para aprender más sobre eventos de raton y otrás técnicas de interacción...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"md`## Otras Técnicas de Interacción`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md`\n### Creando tooltips` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2680,"value":"md`_definición del namespace con todo lo que hemos creado hasta ahora._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2673,"value":"__tooltip_n__ = {\n const container = cloneAndAppend(mutable container);\n \n const chart = cloneAndAppend(mutable chart, container);\n \n const xaxis = cloneAndAppend(mutable xaxis, chart);\n \n const yaxis = cloneAndAppend(mutable yaxis, chart);\n \n const title = cloneAndAppend(mutable title, container);\n \n const ytitle = cloneAndAppend(mutable ytitle, chart);\n \n const xtitle = cloneAndAppend(mutable xtitle, chart);\n \n const legend = cloneAndAppend(mutable legend, chart);\n \n const enterbars = cloneAndAppend(mutable enterbars, chart);\n \n return {\n container,\n chart,\n xaxis,\n yaxis,\n title,\n ytitle,\n xtitle,\n legend,\n enterbars\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2776,"value":"md`_y...continuamos!_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2677,"value":"md`Crear tooltips desde 0 puede resultar bastante complicado. Por suerte, existen bibliotecas hechas por la comunidad que pueden ayudarte, como por ejemplo [\\`d3-tip\\`](https://github.com/Caged/d3-tip)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"md`Importamos la biblioteca`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`Básicamente, lo que hace d3-tip es crear un bloque HTML con unos estilos por defecto que colocará en la posición adecuada dependiendo del elemento del DOM sobre el que se quiera mostrar información. Podrás customizarlo de las siguientes formas antes de mostrarlo: \n1. Definiendo un estilo CSS, en los que especificarás fuente, color de fondo, etc.\n2. Dando un desplazamiento que se usará para posicionar el tooltip en base al origen de coordenadas.\n3. Definiendo el elemento \\`html\\` que te gustaría mostrar dentro del tooltip. Como es habitual, la función \\`d\\` representa el registro de los datos ligado a un elemento, del que extraeremos la información a mostrar en el tooltip.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"tip = d3Tip()\n .attr('class', \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .offset([-10, 0])\n .html(function(d) { return `${d3.format(',')(d.people)} people`; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"md`_Consejo:_ \\`d3.format()\\` puede ayudarte a mostrar números en un formato más ameno para el usuario. Mira cómo [aquí](https://github.com/d3/d3-format)!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`Una vez que hemos definido el tooltip, lo añadimos al gráfico invocando el método visto previamente \\`call()\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"__tooltip_n__.container.call(tip);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"__tooltip_n__.chart\n .selectAll('.bar')\n .on('mouseover', function(d) {\n // mostrar el tooltip en \"mouseover\"\n tip.show(d, this);\n // cuando el cursor está sobre la barra, decrementamos su opacidad para resaltar el efecto de la acción.\n d3.select(this).style('opacity', 0.7);\n }) \n .on('mouseout', function(d) { \n // esconder el tooltip cuando el ratón salga del elemento barra\n tip.hide();\n d3.select(this).style('opacity', 1)\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2736,"value":"md`Cuando se crean nuevas barras, también tenemos que añadirles los listeners. Para ello, modificaremos la función update. (haz click para expandir la celda).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2718,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"md`Hover on the bars to see what's happening!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"__tooltip_n__.container.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"viewof tooltipChartButtons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1971) {\n if (state.year == 2019)\n updateTooltipChart(state.sex, -3);\n else\n updateTooltipChart(state.sex, -5);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2019) {\n if (state.year == 2016)\n updateTooltipChart(state.sex, 3);\n else\n updateTooltipChart(state.sex, 5);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateTooltipChart(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n