Ir al contenido

D3.js

De Wikipedia, la enciclopedia libre
Data-Driven Documents (D3.js)
Información general
Tipo de programa Librería JavaScript
Desarrollador Mike Bostock, Jeffrey Heer, Vadim Ogievetsky, y la comunidad
Lanzamiento inicial 18 de febrero de 2011
Licencia BSD
Estado actual activo
Información técnica
Programado en JavaScript
Plataformas admitidas Multiplataforma
Versiones
Última versión estable 7.0.0 (info) ( 11 de junio de 2021 (3 años, 5 meses y 14 días)[1]​)
Enlaces
[editar datos en Wikidata]

D3.js (o simplemente D3 por las siglas de Data-Driven Documents) es una biblioteca (informática) de JavaScript para producir, a partir de datos, infogramas dinámicos e interactivos en navegadores web. Hace uso de tecnologías bien sustentadas como SVG, HTML5, y CSS. Esta biblioteca es sucesora de la biblioteca Protovis.[3]​ En contraste con muchas otras bibliotecas, D3.js permite tener control completo sobre el resultado visual final.[4]​ La primera versión de la biblioteca fue distribuida en agosto de 2011.[5]​[6]​

Antecedentes

[editar]

Los primeros navegadores de web aparecieron a principios de la década de 1990. Eran inicialmente capaces de mostrar solo páginas web estáticas: la única forma que los usuarios podían interactuar con la web era haciendo clic en enlaces y desplazando las páginas. Hubo muchos esfuerzos para vencer tales limitaciones. El más significativo fue la integración de JavaScript como el lenguaje para escribir algoritmos ejecutados en los navegadores de web. JavaScript gradualmente se convirtió en el lenguaje estándar de facto para crear páginas web interactivas y es por esto que JavaScript fue seleccionado para escribir la biblioteca D3.js.

Por otra parte, muchos investigadores, ingenieros, e interesados en otras ramas de la ingeniería han estado por mucho tiempo en búsqueda de herramientas que habiliten los navegadores web con presentaciones de datos. Hubo muchos proyectos con el mismo objetivo con diferentes niveles de éxito. Los más notables son las herramientas Prefuse, Bengala, y Protovis, los cuales pueden todos ser considerados como predecesores directos de D3.js.

Prefuse fue un grupo de herramientas de visualización creado en 2005 que requería el uso de Java para la creación de los infogramas, de un plug-in en el navegador para la visualización. Bengala fue un grupo similar de herramientas creado en 2007 basado en ActionScript, el cual requería un plug-in en Flash.

En 2009, basado en la experiencia en el desarrollo y uso Prefuse y Bengala, el profesor Jeff Heer del grupo de visualización de la Universidad de Stanford, su estudiante de doctorado Mike Bostock, y su estudiante de maestría Vadim Ogievetsky crearon Protovis, una biblioteca de JavaScript para generar gráficos SVG a partir de datos. La biblioteca ha recibido notable aceptación entre creadores de infogramas y académicos.[7]​

En 2011, el desarrollo de Protovis fue interrumpido para centrar esfuerzos en un nuevo proyecto, D3.js. Basado en las experiencias con Protovis, Bostock, junto con Heer y Ogievetsky, desarrollaron D3.js para ofrecer un marco más expresivo que, al mismo tiempo, se centra en estándares de la web y proporciona rendimiento mejorado.[8]​

Principios técnicos

[editar]

Embebido dentro de una página web de HTML, la biblioteca D3.js utiliza funciones JavaScript predefinidas construidas para seleccionar elementos, crea objetos SVG, les da estilo, o añade transiciones, efectos dinámicos o les agrega información. A estos objetos también se les puede aplicar estilos utilizando CSS. Grandes grupos de datos pueden ser fácilmente asociados a objetos SVG de forma sencilla con funciones de D3.js para generar textos extendidos o infogramas elaborados. Los datos pueden tener formatos variados, más generalmente JSON, CSV o geoJSON, aunque cuando hace falta, se puede escribir otras funciones JavaScript para la captura de otros formatos de datos.

Selecciones

[editar]

El principio central del diseño de D3.js es habilitar al programador para que utilice preferentemente selectores al estilo de CSS para seleccionar elementos del Modelo de objeto del documento (DOM), luego aplicar operadores para manipular los elementos seleccionados de una manera similar a jQuery.[8]​ Por ejemplo, con D3.js, se puede seleccionar todos los párrafos HTML (segmentos de la forma <p>...</p>) y cambiarles su color de texto, p. ej. a color lavanda (lavender): La selección puede estar basada en etiqueta (como en el ejemplo anterior), en clases, en identificadores, en atributos, o en ubicación en la jerarquía. Una vez los elementos son seleccionados, se puede aplicar operaciones sobre ellos, incluyendo consultar y cambiar atributos, mostrar textos, y cambiar estilos (como en el ejemplo anterior). Se puede también agregar o eliminar elementos. Este proceso de crear, modificar y eliminar elementos HTML puede hacerse dependiente de los datos, lo cual es el concepto básico de D3.js. 

 d3.selectAll("p")                 // Seleccionar de todos los elementos <p>
   .style("color", "lavender")     // Asignar al estilo "color" el valor "lavender"
   .attr("class", "squares")       // Asignar al atributo "class" el valor "squares"
   .attr("x", 50);                 // Asignar al atributo "x" (posición horizontal) el valor 50px

Transiciones

[editar]

Las transiciones permiten interpolar en el tiempo valores de atributos, lo que produce cambios visuales en los infogramas. El código siguiente hará que todo párrafo HTML (<p>...</p>) de la página cambie gradualmente su color al rosa: 

 d3.selectAll("p")             // Seleccionar de todos los elementos <p>
   .transition("trans_1")      // transición de nombre "trans_1"
     .delay(0)                 // transición se inicia 0ms luego de ser activada
     .duration(500)            // transición dura 500ms
     .ease("linear")           // transición se anima con una progresión lineal...
   .style("color", "pink");    // ... hacia color:pink

Asociación de datos

[editar]

En ejemplos más avanzados la carga de datos puede dirigir la creación de elementos. D3.js carga un juego de datos asociando a cada elemento un objeto SVG con propiedades (forma, colores, valores) y comportamientos (transiciones, eventos) asociados.[9]​[10]​ 

// Data
  var data = [
     { name:"Ireland",  income:53000, life: 78, pop:6378, color: "green"},
     { name:"Norway",   income:73000, life: 87, pop:5084, color: "blue" },
     { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
  ];
// Crear contenedor SVG
  var svg = d3.select("#hook").append("svg")
        .attr("width", 120)
        .attr("height", 120)
        .style("fill", "#D0D0D0");
// Crear elementos SVGa partir de datos
    svg.selectAll("circle")                  // crear plantilla de círculo virtual
      .data(data)                            // asociar datos
    .enter()                                 // para cada elemento de los datos...
      .append("circle")                      // asociar círculo y datos tales que se asigna... 
        .attr("id", function(d) { return d.name })           // el id del círculo a partir del país
        .attr("cx", function(d) { return d.income /1000  })  // su posición horizontal según ingresos
        .attr("cy", function(d) { return d.life })           // su posición vertical según la esperanza de vida
        .attr("r",  function(d) { return d.pop /1000 *2 })   // su radio según su población
        .attr("fill",function(d){ return d.color });         // su color según el color del país

El código SVG generado es la infografía diseñada según los datos proporcionados.

Gestión de nodos basada en los datos

[editar]

Una vez que un juego de datos es cargado en un documento, D3.js típicamente se utiliza siguiendo un patrón en donde se invoca una función de entrada .enter(), una actualización "implícita," y una función de salida .exit() para cada elemento del juego de datos asociado. Todos los métodos encadenados a continuación del comando .enter() son llamados para cada elemento del grupo de datos que no esté representado en la selección por un elemento del DOM previamente seleccionado (con selectAll()). De la misma forma, la función de actualización implícita es ejecutada sobre todos los nodos existentes que fueron seleccionados para los que ya hay un elemento correspondiente en el juego de datos, y .exit() ejecuta para cada nodo existente seleccionado que no tenga un elemento en el juego de datos. La documentación de D3.js proporciona varios ejemplos de la forma como este patrón trabaja.[11]​

Uso

[editar]

La empresa de infografía Datameer oficialmente utiliza D3.js como su principal tecnología, The New York Times genera algunos de sus infogramas con D3.js.[4]​[12]​ D3.js se utiliza en el editor iD para modificar OpenStreetMap.[13]​[14]​ D3.js ha sido extensamente utilizado para desarrollo de mapas, usando archivos de entrada en GeoJSON y Topojson.

Herramientas y bibliotecas semejantes

[editar]

Referencias

[editar]
  1. ↑ «d3 Releases». Consultado el 15 de julio de 2021. 
  2. ↑ «d3 Releases». Consultado el 3 de agosto de 2015. 
  3. ↑ «For Protovis Users», D3.js, archivado desde el original el 12 de marzo de 2013, consultado el 18 de agosto de 2012 .
  4. ↑ a b Viau, Christophe (26 de junio de 2012), «What’s behind our Business Infographics Designer? D3.js of course», Datameer's blog, archivado desde el original el 23 de septiembre de 2015, consultado el 18 de agosto de 2012 .
  5. ↑ Myatt, Glenn J.; Johnson, Wayne P. (septiembre de 2011), «5.10 Further reading», Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, p. A–2, ISBN 978-0-470-53649-0, consultado el 23 de enero de 2013 .
  6. ↑ «Release Notes», D3.js, consultado el 22 de agosto de 2012 .
  7. ↑ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), «ReVision: Automated Classification, Analysisand Redesign of Chart Images», ACM User Interface Software & Technology (UIST), consultado el 23 de enero de 2013 .
  8. ↑ a b Michael Bostock, Vadim Ogievetsky & Jeffrey Heer (2011). «D3: Data-Driven Documents». IEEE Transactions on Visualization and Computer Graphics 17 (12): 2301-2309. Consultado el 24 de enero de 2016. 
  9. ↑ http://bost.ocks.org/mike/join/
  10. ↑ D3js: 3 little circles editable demo Archivado el 22 de marzo de 2016 en Wayback Machine. (Jsfiddle editable demo)
  11. ↑ http://mbostock.github.io/d3/tutorial/circle.html
  12. ↑ Ashkenas, Jeremy; Bloch, Matthew; Carter, Shan; Cox, Amanda (17 de mayo de 2012). «The Facebook Offering: How It Compares». nytimes.com. Consultado el 23 de enero de 2013. 
  13. ↑ «New OpenStreetMap Editor iD Increases Participation». Archivado desde el original el 5 de octubre de 2016. Consultado el 26 de diciembre de 2013. 
  14. ↑ «iD». OpenStreetMap wiki. Consultado el 26 de diciembre de 2013. 

Enlaces externos

[editar]
Obtenido de «https://es.wikipedia.org/w/index.php?title=D3.js&oldid=152524893»