2a:T6ce,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width/4) .attr("height",height); // 2. Componente del tooltip, texto dentro de un div. var tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") // Al principio está oculto .text("Soy un círculo 😊"); const margen_tooltip = 10 // Pequeño desplazamiento para que el tooltip no se muestre sobre el cursor // 3. Agrego un solo círculo a mi canvas const circle = svg.append("circle") .attr("cx", width/8) .attr("cy", height/2) .attr("r", 40) .attr("fill", "#ff006e") // a. Utilizo los eventos del mouse para volverlo visible si el mouse pasa sobre el círculo .on("mouseover", function(){ // Al entrar el mouse, se vuelve visible tooltip.style("visibility", "visible"); }) .on("mousemove", function(){ // b. Mientras estamos dentro, actualizamos la posición del tooltip tooltip.style("top", (d3.event.pageY-margen_tooltip)+"px") .style("left",(d3.event.pageX+margen_tooltip)+"px"); }) .on("mouseout", function(){ // c. Al salir del círculo, ocultamos el tooltip tooltip.style("visibility", "hidden"); }); // 4. Retorno el canvas return svg.node(); }2b:T73f,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width/4) .attr("height",height); // 2. Componente del tooltip, texto dentro de un div. var tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") // Al principio está oculto .text(""); const margen_tooltip = 10 // Pequeño desplazamiento para que el tooltip no se muestre sobre el cursor // 3. Agrego un solo círculo a mi canvas const circle = svg.append("circle") .attr("cx", width/8) .attr("cy", height/2) .attr("r", 40) .attr("fill", "#ff006e") // a. Utilizo los eventos del mouse para volverlo visible si el mouse pasa sobre el círculo .on("mouseover", function(){ // Al entrar el mouse, se vuelve visible tooltip.style("visibility", "visible"); }) .on("mousemove", function(){ // b. Mientras estamos dentro, actualizamos la posición del tooltip tooltip.style("top", (d3.event.pageY-margen_tooltip)+"px") .style("left",(d3.event.pageX+margen_tooltip)+"px"); tooltip.text("(x="+ d3.event.pageX.toString()+ ",y=" +d3.event.pageY.toString()+")") }) .on("mouseout", function(){ // c. Al salir del círculo, ocultamos el tooltip tooltip.style("visibility", "hidden"); }); // 4. Retorno el canvas return svg.node(); }2c:Te03,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height); // 2. Ejes: svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Asociamos los datos: Usamos datum (y no data) cuando queremos asociar // un único elemento gráfico a los datos, en este caso, un solo path está asociado a toda la linea svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#ff006e") .attr("stroke-width", 1.5) .attr("d", function(d) { return line(d) }); // 4. Componente del tooltip. Esta vez, en vez de un div, utilizaremos un elemento de texto dentro de un // componente g de svg (grupo) var tooltip_g = svg.append("g") .style("visibility", "hide") // Al principio está oculto // Podemos "colgar" cosas de ese grupo, en este caso agregaremos dos líneas de texto, // una para la fecha y otra para el valor del campo close. Noten que tenemos que desplazarlos // ligeramente para que no se superpongan var tooltip_txt_date = tooltip_g.append("text") .attr("y", -32) // Prueben modificando estos valores para ver el efecto .text("texto..."); var tooltip_txt_close = tooltip_g.append("text") .attr("y", -12) // Prueben modificando estos valores para ver el efecto .attr("x", 12) // Prueben modificando estos valores para ver el efecto .text("texto.."); // 5. Agregamos un componente que se encarge de atender los eventos del mouse y mostrar el tooltip. // El gráfico de línea requiere una estrategia diferente a la hora de visualizar tooltips. // En el ejemplo del círculo, simplemente bastaba con asociar la aparición y desaparición del // tooltip a los eventos del mouse de ese círculo. En este caso, no tenemos componentes individuales // para cada dato, solo una larga y única linea. Por eso, una alternativa que es crear componentes, // en este caso, rectángulos invisibles, que abarcan todo el alto del gráfico, pero que de ancho solo // abarcan pares de puntos contiguos. Luego, asociamos a cada rectángulos los eventos de aparición y // desaparición del tooltip. Además, lo desplazamos hasta la posición correspondiente. svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(data)) // Retorna pares de elementos sucesivos: https://observablehq.com/@d3/d3-pairs .join("rect") // Creamos rectángulos invisibles por los que pase el mouse para detectar el evento .attr("x", function([a]) { return x(a.date); }) .attr("height", height) .attr("width", function([a, b]) { return x(b.date) - x(a.date); }) .on("mouseover", function([a]) { tooltip_g.style("visibility", "visible"); // Visibilidad del tooltip tooltip_g.attr("transform", `translate(${x(a.date)},${y(a.close)})`); // Desplazo tooltip_txt_date.text(formatDate(a.date)); // Le seteamos el texto correcto tooltip_txt_close.text(formatClose(a.close)); // Le seteamos el texto correcto }) .on("mouseout", function() { tooltip_g.style("visibility", "hide"); }); // 6. Retornamos el canvas return svg.node(); }2d:Ted1,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height); // 2. Ejes: svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Asociamos los datos: Usamos datum (y no data) cuando queremos asociar // un único elemento gráfico a los datos, en este caso, un solo path está asociado a toda la linea svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#ff006e") .attr("stroke-width", 1.5) .attr("d", function(d) { return line(d) }); // 4. Componente del tooltip. Esta vez, en vez de un div, utilizaremos un elemento de texto dentro de un // componente g de svg (grupo) var tooltip_g = svg.append("g") .style("visibility", "hide") // Al principio está oculto // Podemos "colgar" cosas de ese grupo, en este caso agregaremos dos líneas de texto, // una para la fecha y otra para el valor del campo close. Noten que tenemos que desplazarlos // ligeramente para que no se superpongan var tooltip_txt_date = tooltip_g.append("text") .attr("y", -32) // Prueben modificando estos valores para ver el efecto .text("texto..."); var tooltip_txt_close = tooltip_g.append("text") .attr("y", -12) // Prueben modificando estos valores para ver el efecto .attr("x", 12) // Prueben modificando estos valores para ver el efecto .text("texto.."); // 5. Agregamos un componente que se encarge de atender los eventos del mouse y mostrar el tooltip. // El gráfico de línea requiere una estrategia diferente a la hora de visualizar tooltips. // En el ejemplo del círculo, simplemente bastaba con asociar la aparición y desaparición del // tooltip a los eventos del mouse de ese círculo. En este caso, no tenemos componentes individuales // para cada dato, solo una larga y única linea. Por eso, una alternativa que es crear componentes, // en este caso, rectángulos invisibles, que abarcan todo el alto del gráfico, pero que de ancho solo // abarcan pares de puntos contiguos. Luego, asociamos a cada rectángulos los eventos de aparición y // desaparición del tooltip. Además, lo desplazamos hasta la posición correspondiente. svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(data)) // Retorna pares de elementos sucesivos: https://observablehq.com/@d3/d3-pairs .join("rect") // Creamos rectángulos invisibles por los que pase el mouse para detectar el evento .attr("x", function([a]) { return x(a.date); }) .attr("height", height) .attr("width", function([a, b]) { return x(b.date) - x(a.date); }) .on("mouseover", function([a]) { tooltip_g.style("visibility", "visible"); // Visibilidad del tooltip tooltip_g.attr("transform", `translate(${x(a.date)},${y(a.close)})`); // Desplazo tooltip_txt_date.text(formatDate(a.date)); // Le seteamos el texto correcto tooltip_txt_close.text(formatClose(a.close)); // Le seteamos el texto correcto d3.select(this).style("fill","red").style("opacity",0.5) }) .on("mouseout", function() { tooltip_g.style("visibility", "hide"); d3.select(this).style("fill","none") }); // 6. Retornamos el canvas return svg.node(); }2e:Teb9,{ // 1. Creación de un área de dibujo const svg = d3.create("svg") .attr("width",width) .attr("height",height); // 2. Ejes: svg.append("g").call(xAxis); svg.append("g").call(yAxis); // 3. Asociamos los datos: Usamos datum (y no data) cuando queremos asociar // un único elemento gráfico a los datos, en este caso, un solo path está asociado a toda la linea svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#ff006e") .attr("stroke-width", 1.5) .attr("d", function(d) { return line(d) }); // 4. Componente del tooltip. Esta vez, en vez de un div, utilizaremos un elemento de texto dentro de un // componente g de svg (grupo) var tooltip_g = svg.append("g") .style("visibility", "hide") // Al principio está oculto // Podemos "colgar" cosas de ese grupo, en este caso agregaremos dos líneas de texto, // una para la fecha y otra para el valor del campo close. Noten que tenemos que desplazarlos // ligeramente para que no se superpongan var tooltip_txt_date = tooltip_g.append("text") .attr("y", -32) // Prueben modificando estos valores para ver el efecto .attr("x", -32) .text("texto..."); var tooltip_txt_close = tooltip_g.append("text") .attr("y", -12) // Prueben modificando estos valores para ver el efecto .attr("x", -22) // Prueben modificando estos valores para ver el efecto .text("texto.."); // Círculo para el tooltip var tooltip_circle = tooltip_g.append("circle") .attr("r", 2.5); // 5. Agregamos un componente que se encarge de atender los eventos del mouse y mostrar el tooltip. // El gráfico de línea requiere una estrategia diferente a la hora de visualizar tooltips. // En el ejemplo del círculo, simplemente bastaba con asociar la aparición y desaparición del // tooltip a los eventos del mouse de ese círculo. En este caso, no tenemos componentes individuales // para cada dato, solo una larga y única linea. Por eso, una alternativa que es crear componentes, // en este caso, rectángulos invisibles, que abarcan todo el alto del gráfico, pero que de ancho solo // abarcan pares de puntos contiguos. Luego, asociamos a cada rectángulos los eventos de aparición y // desaparición del tooltip. Además, lo desplazamos hasta la posición correspondiente. svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(data)) // Retorna pares de elementos sucesivos: https://observablehq.com/@d3/d3-pairs .join("rect") // Creamos rectángulos invisibles por los que pase el mouse para detectar el evento .attr("x", function([a]) { return x(a.date); }) .attr("height", height) .attr("width", function([a, b]) { return x(b.date) - x(a.date); }) .on("mouseover", function([a]) { tooltip_g.style("visibility", "visible"); // Visibilidad del tooltip tooltip_g.attr("transform", `translate(${x(a.date)},${y(a.close)})`); // Desplazo tooltip_txt_date.text(formatDate(a.date)); // Le seteamos el texto correcto tooltip_txt_close.text(formatClose(a.close)); // Le seteamos el texto correcto }) .on("mouseout", function() { tooltip_g.style("visibility", "hide"); }); // 6. Retornamos el canvas return svg.node(); }2f:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1601733837209.133,"size":48822}] 29:{"title":"3.2 Tooltips","cells":[{"id":0,"value":"md`# 3.2 Tooltips\n\nRecordemos el mantra de [Ben Shneiderman](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf):\n\n> *Overview first, \n> zoom and filter, \n> then details on demand.*\n\nEl *overview* es la forma inicial de la visualización. No se supone que mostremos todo, pero dar una visión global de los datos. El overview es un mapa que guía al usuario en la exploración.\n\nEl *Zoom* y *filtrado* son métodos para limitar la cantidad de información que se muestra en la visualización y focalizarnos en un punto de interés. Pueden ampliar sobre los controles que ofrece d3 para [zoom](/@d3/zoomable-area-chart), [paneo](/@d3/pannable-chart), [brushing](/@d3/brushable-scatterplot-matrix) y [focalización](/@d3/focus-context). \n\n*Details on demand* refiere a la capacidad del usuario para extraer información puntual y evitar las limitaciones que tiene una apoximación visual. En general, podemos resolver esto mediante el uso de tooltips.\n\nSupongamos el siguiente ejemplo:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n // 1. Creación de un área de dibujo \n const svg = d3.create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height);\n \n // 2. Ejes\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n \n // 3. Asociamos los datos: Usamos datum (y no data) cuando queremos asociar\n // un único elemento gráfico a los datos, en este caso, un solo path está asociado a toda la linea\n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ff006e\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", function(d) { return line(d) }); // El dato es la linea (ver abajo)\n \n // 4. Retornamos el canvas\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`Notemos que es la primera vez que vemos la construcción de un gráfico de línea en d3. Hay algunas cosas que debemos clarificar. En primer lugar, en vez de agregar círculos o barras al área de dibujo por cada entrada en la tabla de datos, los gráficos de linea en general muestran un único componente gráfico: una linea. Esta linea debe estar construida de tal manera que cada posición *x,y* corresponde con una entrada en la tabla de datos, en este caso, cada entrada tiene un campo \\`\\`\\`date \\`\\`\\` y un valor de cierre \\`\\`\\`close\\`\\`\\`. Los datos corresponden a valores financieros diarios de Apple para un determinado conjunto de fechas. El archivo \\`\\`\\`.csv\\`\\`\\` ya fue cargado y se encuentra adjunto en este notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`Para poder dibujar una línea como la del gráfico anterior, d3 nos provee la función [\\`\\`\\`d3.line() \\`\\`\\`](https://observablehq.com/@d3/d3-line). Esta función devuelve un polígono que sigue una secuencia de puntos. Cada punto esta conectado con sus vecinos mediante un segmento de línea recta, creando así una secuencia poligonal o polilínea. Por ejemplo:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"polyline = d3.line()([[10, 60], [40, 90], [60, 40], [90, 50]]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`Presten atención al contenido de polyline: \\`\\`\\`\"M10,60L40,90L60,40L90,50\"\\`\\`\\`\n> * \\`\\`\\`M\\`\\`\\` significa *Move-to*\n> * \\`\\`\\`L\\`\\`\\` significa *Line-to*\n\nPor ejemplo, la secuencia \\`\\`\\`\"M10,60L40,90\"\\`\\`\\`, siginifica que nos movemos hasta la posición [10,60] y hacemos una linea hasta la posición [40,90]. En resumen, la función \\`\\`\\`d3.line()\\`\\`\\` se encarga de generar el string con las instrucciones \\`\\`\\`M/L\\`\\`\\` dado un arreglo con los puntos de la polilinea. De todas formas, si quisiéramos, también podríamos escribir nosotros una función que realice esa traducción. Dibujando la línea que creamos más arriba vemos que pasa por los puntos que especificamos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"// Prueben modificar los puntos de la polyline en la celda de arriba para ver modificaciones\nsvg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`En el caso del primer gráfico de este notebook, definimos una función \\`\\`\\`line()\\`\\`\\`, que recibe como parámetros los datos y crea el polígono en cuestión, donde la coordenada *x* de cada punto de la polilínea corresponde a la *fecha* en los datos, y la coordenada *y* corresponde al valor *close* de la tabla de datos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"line = d3.line()\n .x(d => x(d.date)) // x corresponde al campo fecha\n .y(d => y(d.close)) // y corresponde al campo close","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`Hechas las aclaraciones sobre los gráficos de línea, podemos disponernos a mostrar los tooltips. Un tooltip puede tener varias formas diferentes, pero básicamente podríamos reducirlo a una etiqueta rectangular que muestre un par de lineas de texto. Para eso vamos a utilizar el tag \\`\\`\\`div \\`\\`\\` que me permite compartimentar componentes html. Un \\`\\`\\`div \\`\\`\\` no es más que un contenedor para lo que querramos poner dentro. \n\nPor ejemplo, un div con texto:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`

\n Soy un poco de texto dentro de un componente div\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`O también podríamos tener datos de tipos diferentes dentro de un \\`\\`\\`div \\`\\`\\`. Por ejemplo, podemos anidar componentes para crear estructuras más complejas con filas y columnas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"html`

\n El tutorial no termina más.\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`En el siguiente ejemplo utilizamos un componente \\`\\`\\`div \\`\\`\\` en combinación con los eventos tipo __Hover__ para mostrar un tooltip cuando el mouse pasa sobre el círculo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`En el ejemplo anterior, la etiqueta del tooltip estaba fija, pero podemos cambiarla a gusto dentro del propio evento del mouse. Por ejemplo, podríamos mostrar las coordenadas *x,y* que desatan el evento (noten que estamos utilizando coordenadas relativas a toda la página):` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`Finalmente, habiendo construido ejemplos simples, veamos ahora cómo mostrar tooltips en nuestra visualización de linea. Mostraremos una alternativa al uso de un div, utilizando otro tipo de contenedor denominado \\`\\`\\`\\`\\`\\` o [grupo](https://developer.mozilla.org/es/docs/Web/SVG/Element/g).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`Presten especial atención al comentario del punto 5. en el fragmento de código. Es clave comprender que quien está respondiendo al evento son los rectángulos invisibles que creamos y no la línea en si. Esta estrategia es bastante frecuente para resolver este tipo de situaciones. Abajo volvemos a repetir el gráfico, pero ahora pintamos de rojo el recángulo invisible que está respondiendo al evento: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`Una de las ventajas de usar un componente \\`\\`\\`\\`\\`\\` para el tooltip, es que resulta relativamente simple agregar nuevos componentes gráficos. A continuación, agregamos un círculo para indicar el punto exacto que estamos seleccionando:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 240","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"formatClose = d3.format(\"$.2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}