Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Documentos basados en datos con D3JS

Documentos basados en datos con D3JS 26.AUG.13

Alvaro José Rios Ch
Fundador WebBizarro

D3JS es más que un framework para hacer graficos de barras o de torta, de por sí se aleja un tanto de esto, y se concentra en el fondo del problema: la manipulación de documentos basados en los datos.

Pero que quiere decir esto de manipulación de documentos, se refiere a acceder a nodos del DOM (Document Object Model) de una forma rápida y eficiente, como lo haríamos con Jquery pero con la diferencia que la manipulación la podemos hacer basados en los datos que queremos representar.

En el siguiente ejemplo podemos ver como se selecciona todos los bloques de tipo “<p></p>” en el DOM y les modifica el tamaño de la fuente dependiendo de cada uno de los valores en el arreglo de datos.

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

D3JS aprovecha todas las ventajas de SVG, CSS3 y HTML5 para representar datos por lo que, a pesar de que el núcleo funciona en navegadores viejos, algunas características como transiciones y animaciones solo funcionan en navegadores modernos.

En conclusión es una buena opción cuando necesitas una presentación personalizada de tus datos y no tienes problema de compatibilidad con navegadores antiguos (es decir si el cliente no te exige que funcione en la computadora de tu casa con IE6).

Si solo quieres unos gráficos para representar tus datos puede revisar NVD3 es una libreria que esta basada en D3JS pero se encarga de la capa de presentación.