2f:T235a,{ const margin = {top: 30, right: 20, bottom: 0, left: 20}; const WIDTH = 400; const HEIGHT = 400; const width = WIDTH - margin.left - margin.right; const height = HEIGHT - margin.top - margin.bottom; d3.select('#bar').selectAll('svg').remove() const containerBarchart = d3.select('#bar') .append('svg') .attr('width', WIDTH) .attr('height', HEIGHT) .attr('class', 'chart') .append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const scale = d3.scaleLinear() .range([margin.right, width]) .domain([0, 70000]); const xAxis = d3.axisBottom(scale).ticks(7); const axis = containerBarchart.append('g') .attr('class', 'axis axis--x') axis.call(xAxis) containerBarchart.append("text") .attr("x", (width / 2)) .attr("y", 0 - (margin.top / 2)) .style("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Inmigrantes totales por país"); const lista_final = []; const actualizarBarchart = (cantidad, label) => { // Agregamos a la lista_final la nueva información lista_final.push({label, cantidad}); // Actualizamos el dominio de la escala considerando el nuevo dato agregado scale.domain([0, d3.max(lista_final, d=> d.cantidad)]) // Volvemos a aplicar el método call para que el eje se actualice a la // nueva escala axis.call(xAxis) // Creamos la variable data con todos los datos de la lista "lista_final" const data = containerBarchart.selectAll('.rect').data(lista_final); // Con el método enter() solo accedemos a los datos que no tienen asociado ningún objeto de D3, es decir, son todos los datos nuevos que llegaron a la visualización. A estos datos le asigamos un "rect" con la posición y su altura. Como no definimos su ancho, este será 0. Con esta acción hacemos que ahora D3 considere que el dato si está en la visualización. const enteringBar = data.enter() .append('rect') .attr('class', 'rect') .attr('x', margin.right) .attr('y', (_, i) => i*30 + 15) .attr('height', 20) const enteringtext = data.enter() .append('text') .attr('class', 'text') .attr('x', margin.right) .attr('y', (_, i) => i*30 + 30) /* Agregamos el .merge para identificar las barras que ya estaban dentro del dataset. Como antes ya agregamos los nuevos datos. D3 realizará la acción que le pidamos tanto a los nuevos que agregamos hace 10 líneas como los viejos que estaban en una ejecución anterior. La acción que le decimos es que en un proceso de 0.5 segundos, tome el ancho actual y lo cambie a un nuevo valor. Este nuevo valor será dado por la scala que anteriormente habíamos ajustado. */ data.merge(enteringBar).transition() .duration(500) .attr('width', d => scale(d.cantidad) - margin.right) // PAra el texto, solo efectuamos la transicion a los nuevos textos y le decimos que espere 0.5 segundos para luego setear el valor del texto a mostrar. enteringtext.transition() .delay(500) .text(d => d.label); // Finalmente, trasladamos la posición del eje X en función de la cantidad de barras mostradas. axis.attr('transform', `translate(0,${lista_final.length*30 + 15})`) } const clear = () => { lista_final.length = 0; const dataRect = containerBarchart.selectAll('.rect').data(lista_final); const dataText = containerBarchart.selectAll('.text').data(lista_final); dataRect.exit() .transition() .duration(500) .attr('width', 0) .remove(); dataText.exit() .transition() .delay(500) .text('') .remove(); axis.transition().delay(500).attr('transform', `translate(0,${lista_final.length*30 + 15})`) } // Archivo 2 const marginBubble = {top: 40, right: 20, bottom: 70, left: 60}; const widthBubble = WIDTH - marginBubble.left - marginBubble.right; const heightBubble = HEIGHT - marginBubble.top - marginBubble.bottom; d3.select('#bubble').selectAll('svg').remove() const containerBubblechart = d3.select('#bubble') .append('svg') .attr('width', WIDTH) .attr('height', HEIGHT) .attr('class', 'chart') .append('g') .attr('transform', `translate(${marginBubble.left},${marginBubble.top})`) // Definimos ls circulos de la lista data d3.csv("https://raw.githubusercontent.com/PUC-Infovis/syllabus-2018/master/ayudantia07/update/data.csv").then(data => { const circle = containerBubblechart.selectAll('circle').data(data); // Creamos una escala lineal cuyo dominio será de 0 y max*0.1. Donde máx es el máximo de los datos // y devolverá un número entre 0 y widthBubble let xscale = d3.scaleLinear() .range([0, widthBubble]) .domain([0, d3.max(data, d => +d.women) * 1.1]); // Creamos una escala lineal cuyo dominio será de 0 y 70 y devolverá un número entre heightBubble y 0. // Notar que está inverso porque el 0 está arriba y nosotros queremos que mientras más bajo sea el valor // más abajo esté. let yscale = d3.scaleLinear() .range([heightBubble, 0]) .domain([0, d3.max(data, d => +d.men) * 1.1]); // Agregamos cada circulo let enterCircle = circle.enter().append('circle') .attr('cx', d => xscale(+d.women)) .attr('cy', d => yscale(+d.men)) .attr('r', 10) .attr('class', 'inactive ball'); // Definimos una interacción con el 'click' para que hacer click en la burbuja, esta se agregue al barchart. enterCircle.on('click', (d, i, all) =>{ // Forma 1 de buscar: mediante filtro let cir = d3.selectAll('.inactive').filter(circle => circle == d); if (cir.size()){ cir.attr('class', 'active'); let total = parseInt(d.men) + parseInt(d.women) actualizarBarchart(total, d.country) } // Forma 2 de buscar: usando all que entrega Javascript // Explicación más abajo d3.select(all[i]).attr('class', 'active') }); // Generemos los ejes let axisBottom = d3.axisBottom(xscale).tickPadding(10).ticks(7, 's'); let axisLeft = d3.axisLeft(yscale).tickPadding(10).ticks(10, 's'); // Agregamos un 'g' al gráfico para cada eje const xAxisBubble = containerBubblechart .append('g') .attr('transform', `translate(0, ${heightBubble})`); const yAxisBubbles = containerBubblechart.append('g') // Utilizamos el método call para que se generen los ejes según la escala asociada en cada 'g' xAxisBubble.call(axisBottom); yAxisBubbles.call(axisLeft); // Agregamos nombre al eje x para determinar que estamos considerando la cantidad de mujeres containerBubblechart.append("text") .attr("transform", "translate(" + (widthBubble/2) + " ," + (heightBubble + marginBubble.top + 20) + ")") .style("text-anchor", "middle") .attr("class", "axisname") .text("Mujeres"); // Agregamos nombre al eje y para determinar que estamos considerando la cantidad de hombres containerBubblechart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - marginBubble.left) .attr("x",0 - (heightBubble / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .attr("class", "axisname") .text("Hombres"); // Finalmente agregamos un titulo al gráfico. ¿Por qué a quien no le gustan los titulos? containerBubblechart.append("text") .attr("x", (WIDTH / 2)) .attr("y", 0 - (marginBubble.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Llegada de inmigrantes en 2016"); d3.select('#clear').on('click', (_) =>{ clear(); d3.selectAll('circle').attr('class', 'inactive ball'); }); // Bonus: Interactuar con el Hover y seleccionar elemento en particular. enterCircle.on('mouseover', (d, i , all) =>{ // Buscamos todos los circulos que no son el donde está el mouse d3.selectAll('circle').filter(circle => circle != d).style("opacity", 0.1) // Seleccionamos nuestro circulo y le cambiamos el radio. d3.select(all[i]).transition().attr('r', 20); }); enterCircle.on('mouseout', (_, i, all) =>{ d3.select(all[i]).transition().attr('r', 10); d3.selectAll('circle').style("opacity", 1) }); }) return "Código JS para visualizar" }30:T472,commentOn("", md` \`\`\`js const scale = d3.scaleLinear() .range([margin.right, width]) .domain([0, 70000]); const xAxis = d3.axisBottom(scale).ticks(7); const axis = containerBarchart.append('g') .attr('class', 'axis axis--x') axis.call(xAxis) \`\`\` `,md` El primer comando corresponde a crear una [escala lineal en D3](https://github.com/d3/d3-scale#linear-scales) que recibe números entre 0 y 70000, y los va a mapear a un número entre \`margin.rigth\` (20) y \`width\'. El segundo comando es utilizado para crear el objeto ["Eje inferior"](https://github.com/d3/d3-axis#axisBottom). a este se le entrega la escala anteriomente definida y se le indica, mediante el método [ticks](https://github.com/d3/d3-axis#axis_ticks), cuantos separaciones poner **inicialmente** en el eje. Más información sobre los ejes en el siguiente [link](https://observablehq.com/collection/@d3/d3-axis). El tercer comando consiste en crear un nuevo \`g\` que va a contener la parte visual del eje inferior, y el cuarto comando se encarga de solicitar al \`g\` que agregue el "Eje inferior". `)31:Tab7,commentOn("", md` \`\`\`js const lista_final = []; const actualizarBarchart = (cantidad, label) => { // Agregamos a la lista_final la nueva información lista_final.push({label, cantidad}); // Actualizamos el dominio de la escala considerando el nuevo dato agregado scale.domain([0, d3.max(lista_final, d=> d.cantidad)]) // Volvemos a aplicar el método call para que el eje se actualice a la // nueva escala axis.call(xAxis) // Creamos la variable data con todos los datos de la lista "lista_final" const data = containerBarchart.selectAll('.rect').data(lista_final); // Con el método enter() solo accedemos a los datos que no tienen asociado ningún //objeto de D3, es decir, son todos los datos nuevos que llegaron a la visualización. // A estos datos le asigamos un "rect" con la posición y su altura. Como no // definimos su ancho, este será 0. Con esta acción hacemos que ahora D3 considere // que el dato si está en la visualización. const enteringBar = data.enter() .append('rect') .attr('class', 'rect') .attr('x', margin.right) .attr('y', (_, i) => i*30 + 15) .attr('height', 20) const enteringtext = data.enter() .append('text') .attr('class', 'text') .attr('x', margin.right) .attr('y', (_, i) => i*30 + 30) /* Agregamos el .merge para identificar las barras que ya estaban dentro del dataset. Como antes ya agregamos los nuevos datos, D3 realizará la acción que le pidamos tanto a los nuevos que agregamos hace 10 líneas como los viejos que estaban en una ejecución anterior. La acción que le decimos es que en un proceso de 0.5 segundos, tome el ancho actual y lo cambie a un nuevo valor. Este nuevo valor será dado por la escala que anteriormente habíamos ajustado. */ data.merge(enteringBar).transition() .duration(500) .attr('width', d => scale(d.cantidad) - margin.right) // PAra el texto, solo efectuamos la transicion a los nuevos textos y le decimos // que espere 0.5 segundos para luego setear el valor del texto a mostrar. enteringtext.transition() .delay(500) .text(d => d.label); // Finalmente, trasladamos la posición del eje X en función de la cantidad de barras mostradas. axis.attr('transform', \`translate(0,\${lista_final.length*30 + 15})\`) } \`\`\` `,md` El anterior código se encarga de agregar información al gráfico de barra. Esto se hace dentro de un función para que pueda ser llamada por el _scatterplot_ cada vez que hago _click_ en un nodo. `) 32:T662,commentOn("", md` \`\`\`js const clear = () => { // indicar que el largo de la lista será 0. Con esto no es necesario eliminar cada dato // de la lista, sino que para Javascript, esa lista ya está vacía. lista_final.length = 0; // Ingresamos la nueva información para que D3 entienda que los datos asociados // a las barras y textos ya no existen. const dataRect = containerBarchart.selectAll('.rect').data(lista_final); const dataText = containerBarchart.selectAll('.text').data(lista_final); // Con el método exit accedemos a todos los elementos de D3 que ya no tienen una conexión+ // con algún dato. A estos elementos le indicamos que en un tiempo de 0.5 segundos, hagan que // su ancho sea 0 y luego sean eliminados del DOM. dataRect.exit() .transition() .duration(500) .attr('width', 0) .remove(); // En el caso del texto, le decimos que espere 0.5 segundos y luego elimine el elemento. dataText.exit() .transition() .delay(500) .text('') .remove(); // trasladmos el eje X según la cantidad de barras que tiene el gráfico. En este caso, 0 barras. axis.transition().delay(500).attr('transform', \`translate(0,\${lista_final.length*30 + 15})\`) } \`\`\` `,md` Lo anterior es una función encargada de limpiar el gráfico. Al igual que la otra función de agregar datos, todo estas acciones de limpiar el gráfico deben estar dentro de una función para que el gráfico de puntos pueda llamarla cuando se hace click en el botón "Reiniciar". `)33:T183b,md` # 2 - Gráfico de puntos (_scatterplot_) El siguiente código ya es crear un _scatterplot_ estático como lo realizado en la [ayudantía 4](https://github.com/PUC-Infovis/syllabus-2019/tree/master/ayudantias/ayudantia04). Por lo tanto, dejará el código + comentarios en cada línea de lo realizado, pero no se agregarán links adicionales como en la parte del gráfico de barra. \`\`\`javascript // Definir márgenes del HTML const marginBubble = {top: 40, right: 20, bottom: 70, left: 60}; // Definir nuevos tamaños en función a los margenes definidos anteriormente const widthBubble = WIDTH - marginBubble.left - marginBubble.right; const heightBubble = HEIGHT - marginBubble.top - marginBubble.bottom; // Como ObservableHQ puede ejecutar una celda más de una vez, debemos asegurarnos de eliminar // el SVG anterior para que no tengamos visualizaciones duplicadas. d3.select('#bubble').selectAll('svg').remove() // Agregamos un nuevo SVG dentro del div cuyo ID es "bubble" y luego agregamos un 'g' para adentro poner todo. const containerBubblechart = d3.select('#bubble') .append('svg') .attr('width', WIDTH) .attr('height', HEIGHT) .append('g') .attr('transform', \`translate(\${marginBubble.left},\${marginBubble.top})\`) // Cargamos el CSV y luego, con esa información definimos cada circulo d3.csv("https://raw.githubusercontent.com/PUC-Infovis/syllabus-2018/master/ayudantia07/update/data.csv").then(data => { // Asociamos cada información con algún objeto de D3 del tipo circulo (que más adelante definiremos) const circle = containerBubblechart.selectAll('circle').data(data); // Creamos una escala lineal cuyo dominio será de 0 y max*0.1. Donde máx es el máximo de los datos // y devolverá un número entre 0 y widthBubble let xscale = d3.scaleLinear() .range([0, widthBubble]) .domain([0, d3.max(data, d => +d.women) * 1.1]); // Creamos una escala lineal cuyo dominio será de 0 al máximo elemento * 1.1 y devolverá un // número entre heightBubble y 0. // Notar que está inverso porque el 0 está arriba y nosotros queremos que mientras más bajo sea el valor // más abajo esté. let yscale = d3.scaleLinear() .range([heightBubble, 0]) .domain([0, d3.max(data, d => +d.men) * 1.1]); // Agregamos cada circulo let enterCircle = circle.enter().append('circle') .attr('cx', d => xscale(+d.women)) .attr('cy', d => yscale(+d.men)) .attr('r', 10) .attr('class', 'inactive ball'); // Definimos una interacción con el 'click' para que hacer click en la burbuja, esta se agregue al barchart. enterCircle.on('click', (d) =>{ // Entre los circulos que están inactivos buscamos al que le hicimos click. let cir = d3.selectAll('.inactive').filter(circle => circle == d); if (cir.size()){ // Esto es para verificar que la busqueda anterior dió un resultado. // Aquí le cambiamos su calse a 'active' para que si volvemos a hacer click, no encontremos // a este punto cir.attr('class', 'active'); let total = parseInt(d.men) + parseInt(d.women) actualizarBarchart(total, d.country) } }); // Generemos los ejes let axisBottom = d3.axisBottom(xscale).tickPadding(10).ticks(7, 's'); let axisLeft = d3.axisLeft(yscale).tickPadding(10).ticks(10, 's'); // Agregamos un 'g' al gráfico para cada eje const xAxisBubble = containerBubblechart .append('g') .attr('transform', \`translate(0, \${heightBubble})\`); const yAxisBubbles = containerBubblechart.append('g') // Utilizamos el método call para que se generen los ejes según la escala asociada en cada 'g' xAxisBubble.call(axisBottom); yAxisBubbles.call(axisLeft); // Agregamos nombre al eje x para determinar que estamos considerando la cantidad de mujeres containerBubblechart.append("text") .attr("transform", "translate(" + (widthBubble/2) + " ," + (heightBubble + marginBubble.top + 20) + ")") .style("text-anchor", "middle") .attr("class", "axisname") .text("Mujeres"); // Agregamos nombre al eje y para determinar que estamos considerando la cantidad de hombres containerBubblechart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - marginBubble.left) .attr("x",0 - (heightBubble / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .attr("class", "axisname") .text("Hombres"); // Finalmente agregamos un titulo al gráfico. ¿Por qué a quien no le gustan los titulos? containerBubblechart.append("text") .attr("x", (WIDTH / 2)) .attr("y", 0 - (marginBubble.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Llegada de inmigrantes en 2016"); // Conectamos el botón con ID clear a la siguiente función que se encarga de llamar a la función "clear" // definida anteriormente y luego cambiar la clase de cada circulo a 'inactive ball' // para que hagamos click nuevamente sobre ella. d3.select('#clear').on('click', (_) =>{ clear(); d3.selectAll('circle').attr('class', 'inactive ball'); }); // Bonus: Interactuar con el Hover y seleccionar elemento en particular. enterCircle.on('mouseover', (d, i , all) =>{ // Buscamos todos los circulos que no son el donde está el mouse d3.selectAll('circle').filter(circle => circle != d).style("opacity", 0.1) // Seleccionamos nuestro circulo y le cambiamos el radio. d3.select(all[i]).transition().attr('r', 20); }); enterCircle.on('mouseout', (_, i, all) =>{ d3.select(all[i]).transition().attr('r', 10); d3.selectAll('circle').style("opacity", 1) }); }) \`\`\` `34:[] 2d:{"title":"Interacción y transición básicas","cells":[{"id":3,"value":"HTML = html`\n\n \n

Información extraida de DataChile

Puede hacer click en los nodos del scatterplot

\n
\n
\n
\n
\n
\n \n
\n\n `;","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`\nImportar la librería d3 con:\n\n\\`d3 = require(\"d3@5\");\\`. \n\nNotar que es **distinto en un archivo HTML**, ahí se hace: \n\n\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`# Explicaciones paso a paso\nHacer _click_ en el código para ver o esconder una descripción\n## 1 - Gráfico de barra`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"commentOn(\"\",\nmd`\n\\`\\`\\`js\n const margin = {top: 30, right: 20, bottom: 0, left: 20};\n\n const WIDTH = 400;\n const HEIGHT = 400;\n\n const width = WIDTH - margin.left - margin.right;\n const height = HEIGHT - margin.top - margin.bottom;\n\\`\\`\\`\n`,md`\nEn estas 5 líneas se definieron los margenes a utilizar dentro del SVG, el ancho y altura del SVG, y finalmente el nuevo ancho y altura considerando los margenes indicados.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"commentOn(\"\",\nmd`\n\\`\\`\\`js\n d3.select('#bar').selectAll('svg').remove()\n const containerBarchart = d3.select('#bar')\n .append('svg')\n .attr('width', WIDTH)\n .attr('height', HEIGHT)\n .append('g')\n .attr('transform', \\`translate(\\${margin.left},\\${margin.top})\\`)\n\\`\\`\\`\n`,md`\nEn esta parte se realizan 2 acciones: buscar cualquier SVG y eliminarlo, y buscar un elemento con ID \"bar\" y agregarle un nuevo SVG.\n\nEl paso 1 fue necesario porque cada vez que se ejecute el código javascript, se iba a hacer \"_append_\" de un SVG y por lo tanto, el HTML iba a tener multiples SVGs. Esto se soluciona recargando la página, pero como no queremos recargar ObservableHQ, mejor agregar una línea que en caso de detectar un SVG anterior, lo va a eliminar.\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"commentOn(\"\",\nmd`\n\\`\\`\\`js\n containerBarchart.append(\"text\")\n .attr(\"x\", (width / 2)) \n .attr(\"y\", 0 - (margin.top / 2))\n .style(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"16px\") \n .style(\"text-decoration\", \"underline\") \n .text(\"Inmigrantes totales por país\");\n\\`\\`\\`\n`,md`\nEn esta parte se está agregando un texto a la visualización del gráfico de barra. Se le indica la posición x, y, luego se le da ciertas propiedades de estilo y finalmente se le indica el texto. \n\n**Nota** con \\`.style(\"text-anchor\", \"middle\") \\` se está indicando que la posición x,y va a ser la posición del centro del texto. En otro caso se asume que el x,y indican desde donde empieza el texto. Para más información de forma de alinear texto, revisar el siguiente [link](https://bl.ocks.org/emmasaunders/0016ee0a2cab25a643ee9bd4855d3464).\n`)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"borderStyle = \"border:2px currentColor solid; border-radius:7px; display:inline-block; padding:7px\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import {commentOn, commentOnToggle} from \"@bryangingechen/commenton\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}