2d:null 2e:["$","title",null,{"children":"1.3 Primeros pasos en D3 | Emmanuel Iarussi | Observable"}] 33:T46d,md`# 1.3 Primeros pasos en D3 Una de las mejores maneras de comenzar con d3 es [explorar la galería](/@d3/gallery). 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. Puede llegar a parecer tramposo copiar código... ¡pero está bien 👌👌! Sin embargo, 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.`34:[] 31:{"id":"62bc594aab691576","slug":"1-3-primeros-pasos-en-d3","title":"1.3 Primeros pasos en D3","thumbnail":"b90d6873f6b23a790d017123c2f67ae5c9bd824c518e4549e806240f8ca3f3c9","access_level":"public","create_time":"$D2020-06-15T21:59:11.157Z","update_time":"$D2020-06-16T00:14:46.925Z","view_time":null,"first_public_time":"$D2020-06-15T23:33:07.400Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":"pro_2024"},"version":254,"publish_version":254,"role":null,"authored":false,"authors":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null}],"members":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"title":"1.3 Primeros pasos en D3","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Supongamos que queremos crear trés circulos. Tal y como vimos en el notebook 1.2 de introducción al HTML, una posible forma de hacerlo es la siguiente:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`` // cx,cy son las coordenadas de cada círculo y r su radio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`A simple vista, no parece una forma muy conveniente de crear componentes gráficos. En general, en una visualización queremos asociar los valores de los datos a algunas de las propiedades geométricas/perceptuales de los componentes gráficos y de esta forma tenemos que incrustar esos valores de manera estática en el código del componente. Por 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`Una posible alternativa es utilizar \\${...\\} para referenciar a posiciones del arreglo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`Mucho mejor! 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 tengo que crear. 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:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`Definamos ahora un arreglo con más elementos. Cada elemento del arreglo es 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`d3 nos permite crear 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. El siguiente fragmento demuestra cómo asociar datos arbitrarios (en este caso, disponibles en el arreglo) con componetnes gráficos. El bloque __.data(coleccion_de_circulos).enter().append(\"circle\")__ *le dice* a d3 que queremos crear tantos círculos como elementos haya en nuestro arreglo (5 en este caso). Hacemos saltos de línea antes de cada punto para que el código sea más legible, pero no es necesario para el correcto funcionamiento. Probá modificar propiedades y/o agregar/quitar elementos en el arreglo *coleccion_de_circulos* para ver el efecto en la visualización.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\")\n .data(coleccion_de_circulos)\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`Podemos también definir colecciones de datos a partir de ciclos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`Dibujemos coleccion_ciclos usando nuestra función *dibujar*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"dibujar(coleccion_ciclos)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"coleccion_animada = coleccion_de_circulos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"