Diferencia entre revisiones de «D3.js»

De Wikipedia, la enciclopedia libre
Ir a siguiente diferencia →
Contenido eliminado Contenido añadido
VisualWikitexto
Creado al traducir la página «D3.js»
(Sin diferencias)

Revisión del 03:17 25 ene 2016

D3.js (O simplemente D3 por las siglas de Data-Driven Documents) es una librería 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 librería es sucesora de la librería Protovis.[1]​ En contraste con muchas otras librerías, D3.js permite tener control completo sobre el resultado visual final.[2]​ La primera versión de la librería fue distribuida agosto de 2011.[3]​[4]​

Antecedentes

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 librería D3.js.

Por otra parte, muchos investigadores, ingenieros,  e interesados en otras ramas de la ingeniería estaban en búsqueda de herramientas que habilitaran los navegadores de 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, y las visualizaciones se realizaban con el uso de un plug-in. Bengala fue un grupo similar de herramientas creado en 2007 basado en ActionScript, el cual requería un plugin en Flash.

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

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

Principios técnicos

Embebido dentro de una página web de HTML, la liberría 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 apicar estilos utilizando CSS. Grande 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 tender 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

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 manipularl los elementos seleccionados de una manera similar a jQuery (ver Bostock, Ogievetsky & Heer 2011, cap. 3). 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.

Transiciones

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:

Asociación de datos

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.[6]​[7]​

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

Gestión de nodos basada en los datos

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.[8]​

Uso

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.[2]​[9]​ D3.js se utiliza en el editor iD  para modificar OpenStreetMap.[10]​[11]​ D3.js Ha sido extensamente utilizado para desarrollo de mapas, usando archivos de entrada en GeoJSON y Topojson.

Referencias

  1. ↑ «For Protovis Users», D3.js, consultado el August 18, 2012 .
  2. ↑ a b Viau, Christophe (June 26, 2012), «What’s behind our Business Infographics Designer? D3.js of course», Datameer's blog, consultado el August 18, 2012 .
  3. ↑ Myatt, Glenn J.; Johnson, Wayne P. (September 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 January 23, 2013 .
  4. ↑ «Release Notes», D3.js, consultado el August 22, 2012 .
  5. ↑ 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 January 23, 2013 .
  6. ↑ http://bost.ocks.org/mike/join/
  7. ↑ D3js: 3 little circles editable demo (Jsfiddle editable demo)
  8. ↑ http://mbostock.github.io/d3/tutorial/circle.html
  9. ↑ Ashkenas, Jeremy; Bloch, Matthew; Carter, Shan; Cox, Amanda (17 de mayo de 2012). «The Facebook Offering: How It Compares». nytimes.com. Consultado el January 23, 2013. 
  10. ↑ «New OpenStreetMap Editor iD Increases Participation». Consultado el 26 December 2013. 
  11. ↑ «iD». OpenStreetMap wiki. Consultado el 26 December 2013. 

Enlaces externos

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