2a:[] 29:{"title":"1.3 Primeros pasos en D3","cells":[{"id":0,"value":"md`# 1.3 Primeros pasos en D3\n\nUna de las mejores maneras de comenzar con D3 es [explorar la galería](/@d3/gallery). El objetivo del paquete D3 es simplificarnos la creación de contenido gráfico en HTML, proveyendo algunas funciones de alto nivel, como la creación de ejes y escalas, paletas de color y fundamentalmente un mecanismo para la asociación dinámica entre datos y componentes visuales. Esto último es crucial, dado que una vez que la asociación se realiza, la visualiazación se actualiza automaticamente a partir de los datos. Veamos esto en profundidad:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`Supongamos que queremos crear trés circulos. Tal y como vimos en la notebook 1.2 de introducción al HTML, una posible forma de hacerlo es la siguiente:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`` // cx,cy son las coordenadas de cada círculo y r su radio","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`Si, por ejemplo, quisiéramos cambiar el radio y el color a rojo, podríamos escribir lo siguiente:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`A simple vista, no parece una forma muy conveniente de crear componentes gráficos... ¿Por qué? Porque necesito cambiar el código cada vez que quiero modificar una propiedad gráfica. En general, en una visualización queremos asociar datos a algunas de las propiedades geométricas/perceptuales de los componentes gráficos. Utilizando HTML puro tendríamos que incrustar esos valores de manera estática en el código del componente. \n\nPor ejemplo, supongamos que quiero que el radio de los circulos responda al contenido de un arreglo con 3 elementos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"arreglo = [25,10,25] // probá cambiar los valores para ver como se actualiza la visualización","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`Una posible alternativa es utilizar \\`\\`\\`\\${...\\}\\`\\`\\` para referenciar a posiciones del arreglo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`Ok, va un poco mejor... pero no nos entusiasmemos. Supongamos ahora que la cantidad de círculos en mi arreglo es dinámica. Es decir, puedo tener una cantidad variable de elementos que no conozco con anterioridad, por lo que definir cada círculo mediante tags \\`\\`\\` \\`\\`\\` no me es posible simplemente porque desconozco cuantos tendré que crear cada vez. Para resolver esto vamos a usar uno de los *superpoderes* que nos da d3. \n\nPero primero hay que decirle a __Observable__ que vamos a usar la librería, asi que la importamos de la siguiente manera:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"d3 = require(\"d3@5\") //D3v5","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`Ya estamos listos para utilizar D3. Lo primero que vamos a hacer es crear un área de dibujo. En vez de utilizar los tags \\`\\`\\` \\`\\`\\` de HTML, utilizamos esta vez la función de D3 \\`\\`\\`d3.create()\\`\\`\\` que nos permite crear componentes de forma más conveniente. Como el área de dibujo todavía está vacia, no vemos más que un espacio en blanco:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"{\n // 1. Creación de un área de dibujo (512x90 pixeles)\n return d3.create(\"svg\").attr(\"width\",512).attr(\"height\",90).node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"md` D3 nos permite crear y actualizar elementos gráficos HTML dinámicamente para cada uno de las entradas del arreglo. Para lograrlo, sólo tenemos que disponer algunas lineas de código. \n\nEl siguiente fragmento demuestra cómo asociar datos arbitrarios (en este caso, disponibles en el arreglo \\`\\`\\`arreglo = [25,10,25]\\`\\`\\`) con componetnes gráficos. El bloque \\`\\`\\`.data(arreglo).enter().append(\"circle\")\\`\\`\\` *le dice* a D3 que queremos crear tantos círculos como elementos haya en nuestro arreglo (3 en este caso). No te preocupes si no entendés completamente el mecanismo de selección y creación de componentes, veremos eso en la [siguiente notebook](https://observablehq.com/@emmanueliarussi/1-4-selecciones-en-d3). Hacemos saltos de línea antes de cada punto para que el código sea más legible:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"{\n // 1. Creación de un área de dibujo (512x90 pixeles)\n const svg = d3.create(\"svg\").attr(\"width\",512).attr(\"height\",90)\n \n // 2. Asociamos la colección de círculos a componentes gráficos \"circle\"\n var circulos = svg.selectAll(\"circle\") // Esta selección da vacio\n .data(arreglo) // Estos son los datos\n .enter() // Para cada entrada\n .append(\"circle\"); // Agregá un círculo\n\n // 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo\n circulos.attr(\"cx\", 30 ) // Centro en X\n .attr(\"cy\", 30) // Centro en Y\n .attr(\"r\" , function(d) {return d;} ) // Radio\n .style(\"fill\", \"red\"); // Color\n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`¿Qué está pasando? ¿Por qué no vemos trés círculos? El motivo por el que no vemos trés, sino uno es que están siendo graficados de manera superpuesta porque no hemos asociado la posición de cada círculo a las propiedades de los datos. Definamos entonces un arreglo un poco más complejo. Esta vez, en cada elemento tenemos un objeto que contiene la información de las propiedades de cada círculo (posición x e y, radio y color). La paleta de colores que utilizamos fue generada con [esta](https://coolors.co/ffbe0b-fb5607-ff006e-8338ec-3a86ff) aplicación web. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"coleccion_de_circulos = [\n {eje_x:50 , eje_y:45, radio:10, color:\"#ffbe0b\"},\n {eje_x:150, eje_y:45, radio:14, color:\"#fb5607\"},\n {eje_x:250, eje_y:45, radio:18, color:\"#ff006e\"},\n {eje_x:350, eje_y:45, radio:22, color:\"#8338ec\"},\n {eje_x:450, eje_y:45, radio:26, color:\"#3a86ff\"}\n]; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`Ahora podemos asociar cada propiedad en los datos, a atributos de la gráfica. Probá modificar propiedades y/o agregar/quitar elementos en \\`\\`\\`arreglo\\`\\`\\` para ver el efecto en la visualización:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n // 1. Creación de un área de dibujo (512x90 pixeles)\n const svg = d3.create(\"svg\")\n .attr(\"width\",512)\n .attr(\"height\",90);\n \n // 2. Asociamos la colección de círculos a componentes gráficos \"circle\"\n var circulos = svg.selectAll(\"circle\") // Esta selección da vacio\n .data(coleccion_de_circulos) // Estos son los datos\n .enter() // Para cada entrada\n .append(\"circle\"); // Agregá un círculo\n\n // 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo\n // para setear las propiedades cx, cy, r y fill del componente HTML circle\n circulos.attr(\"cx\", function(d) {return d.eje_x;} )\n .attr(\"cy\", function(d) {return d.eje_y;} )\n .attr(\"r\" , function(d) {return d.radio;} )\n .style(\"fill\", function(d) { return d.color;});\n \n // 4. Retornamos el canvas\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`Tal y como vimos en los tutoriales anteriores, es posible definir código dentro de funciones con nombre para poder reutilizarlas. A continuación, creamos la función *dibujar* que toma una colección de círculos y las dibuja. La utilizaremos un par de celdas más abajo.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"dibujar = function(coleccion) {\n // 1. Creación de un área de dibujo (512x90 pixeles)\n const svg = d3.create(\"svg\")\n .attr(\"width\",512)\n .attr(\"height\",90);\n \n // 2. Asociamos la colección de círculos a componentes gráficos \"circle\"\n var circulos = svg.selectAll(\"circle\")\n .data(coleccion)\n .enter()\n .append(\"circle\");\n\n // 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo\n // para setear las propiedades cx, cy, r y fill del componente HTML circle\n circulos.attr(\"cx\", function(d) {return d.eje_x;} )\n .attr(\"cy\", function(d) {return d.eje_y;} )\n .attr(\"r\" , function(d) {return d.radio;} )\n .style(\"fill\", function(d) { return d.color;});\n \n // 4. Retornamos el canvas\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`Podemos también definir colecciones de datos a partir de ciclos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"coleccion_ciclos = {\n var coleccion = []; // Arreglo de datos a retornr\n for(var it = 0; it < 5; it = it+1) {\n var circle_elem = { eje_x: (it*100)+50, eje_y: 45, radio: (it*4)+10, color : \"#ff006e\" };\n coleccion.push(circle_elem);\n }\n return coleccion;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Dibujemos coleccion_ciclos usando nuestra función *dibujar*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"dibujar(coleccion_ciclos)","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Para finalizar, veamos como podemos combiar todo esto para crear animaciones. Empecemos por crear una copia de coleccion_de_circulos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"coleccion_animada = [\n {eje_x:50 , eje_y:45, radio:10, color:\"#ffbe0b\"},\n {eje_x:150, eje_y:45, radio:14, color:\"#fb5607\"},\n {eje_x:250, eje_y:45, radio:18, color:\"#ff006e\"},\n {eje_x:350, eje_y:45, radio:22, color:\"#8338ec\"},\n {eje_x:450, eje_y:45, radio:26, color:\"#3a86ff\"}\n]; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"{\n var up_or_down = [1,1,1,1,1] // Dirección (+1 o -1 a cada radio)\n while(true) { // Ciclo infinito\n for(var it = 0; it < 5; it = it+1) { // Para cada elemento del arreglo\n if(coleccion_animada[it].radio > 30) // Si llego al máximo de crecimiento (30px)\n up_or_down[it] = -1 // Decremento el radio\n else if(coleccion_animada[it].radio == 0) // Sino, lo incremento\n up_or_down[it] = 1\n coleccion_animada[it].radio += up_or_down[it] // Actualizo con la dirección computada\n }\n yield dibujar(coleccion_animada); // Dibujo los círculos en su estado actual\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`En general, con un poco de suerte casi siempre es posible encontrar un ejemplo que pueda adaptarse a tus necesidades sin demasiados cambios, ahorrando el esfuerzo que implica construir visualizaciones complejas dede cero. Por ejemplo, para construir un *treemap* podrían consultar la referencia en la API de [d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md), pero es mucho más rapido ver cómo está construido el [ejemplo de mapa de árbol](https://observablehq.com/@d3/treemap) y sustituir sus datos. Es importante utilizar esto ejemplos no solo como plantillas reutilizables sino también como herramientas para aprender. Es muy común que al querer modificar ligeramente los ejemplos, los *rompamos* sin saber exactamente la causa del problema. Por eso, a continuación vamos a comenzar con ejemplos simples que justifican la necesidad de D3.js, a la vez que nos demuestran su capacidad.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}