NVD3 Es una librería escrita en JavaScript que sirve para representar gráficos en HTML. Se integra perfectamente con D3, ya que una de sus funciones es la de construir gráficos y componentes de estos gráficos que puedan ser utilizados por D3. En esta entrada vamos a crear un gráfico sencillo con NVD3, pero es necesario para ello que tengáis algún conocimiento de D3 , HTML, JavaScript y CSS.
Quiero leer...
Librerías necesarias para crear un gráfico sencillo en NVD3
Para trabajar con la librería NVD3 tenemos que descargar varios archivos de su página web. Estos archivos serán dos archivos JavaScript y una hoja de estilo CSS:
d3.v3.min.jsnv.d3.cssnv.d3.js
Tenemos que hacer referencia a esos archivos en la cabecera (<head></head>) de un archivo HTML:
<html> <head> <script src = "https://d3js.org/d3.v3.min.js"></script> <script type = "text/javascript" src = "nv.d3.js"></script> <link rel = "stylesheet" href = "https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css"> </head> <body> </body> </html>
Como podéis observar, dos de esos archivos están enlazados directamente a internet y otro lo descargué en ordenador local. Es importante que tengáis en cuenta esta situación para poder saber si los tenéis descargados a nivel local, o simplemente queréis llamarlos a la dirección web donde se localiza.
Creación de un diagrama de barras
En su página web existen multitud de ejemplos con el código escrito y preparado para hacer las representaciones gráficas. Para ilustrar simplemente cómo funciona NVD3, vamos a realizar un diagrama de barras. En la página para graficar estas figuras se ve un código de ejemplo, que nosotros hemos adaptado. Importante es que se ejecuta la función nv.models.multiBarChart(), que es la específica de estos diagramas de barras.
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.reduceXTicks(true) // Si se reduce o no las etiquetas del eje X
.rotateLabels(0) // Ángulo de rotación de las etiquetas del eje X
.showControls(true) // Cambia entre datos agrupados o apilados
.groupSpacing(0.1) // Distancia entre las barras
;
chart.xAxis // Se dibuja el eje X
.tickFormat(d3.format(',f'));
chart.yAxis // Se dibuja el eje Y
.tickFormat(d3.format(',.1f'));
d3.select('#figura1 svg') // Indicamos que nos haga la figura en esa zona del HTML
.datum( // Son los datos que van a dibujarse
[{ Key : "Figura",
color : "blue",
values: [{x: 2, y: 6.8}, {x: 4, y: 6.1},
{x: 5, y: -3}]}])
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
})
Este código podemos incorporarlo en el <head></head> includo en las etiquetas <script></script>, o bien hacer un script externo de JavaScript y referenciarlo en la cabecera del HTML. Si lo escribimos directamente en el HTML, quedaría del siguiente modo:
<html>
<head>
<script src = "https://d3js.org/d3.v3.min.js"></script>
<script type = "text/javascript" src = "nv.d3.js"></script>
<link rel = "stylesheet" href = "https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css">
<script>
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.reduceXTicks(true) // Si se reduce o no las etiquetas del eje X
.rotateLabels(0) // Ángulo de rotación de las etiquetas del eje X
.showControls(true) // Cambia entre datos agrupados o apilados
.groupSpacing(0.1) // Distancia entre las barras
;
chart.xAxis // Se dibuja el eje X
.tickFormat(d3.format(',f'));
chart.yAxis // Se dibuja el eje Y
.tickFormat(d3.format(',.1f'));
d3.select('#figura1 svg') // Indicamos que nos haga la figura en esa zona del HTML
.datum( // Son los datos que van a dibujarse
[{ Key : "Figura",
color : "blue",
values: [{x: 2, y: 6.8}, {x: 4, y: 6.1},
{x: 5, y: -3}]}])
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
})
</script>
</head>
<body>
</body>
</html>
En el código anterior que nos permite crear un gráfico sencillo en NVD3, destaca la función .datum(). Esta función tiene que incluir los datos que vamos a representar gráficamente. En nuestro ejemplo hemos empleado un array con 3 elementos que hemos escrito manualmente, aunque también podemos enlazar al archivo con los datos que queramos representar.
Si salvamos nuestro archivo HTML ahora y lo abrimos en un navegador, observamos que aun no está dibujando nada en nuestra web. Esto sucede porque la función d3.select('#figura1 svg') indica que se pinte la gráfica en el área figura1 del cuerpo del archivo HTML.
Por lo tanto, el siguiente paso es definir esa zona identificada como figura1 en el <body></body> de la web, especificando que será un formato SVG y con una altura y anchura de 700, aunque estos parámetros están sujetos a la necesidades de cada uno:
<body> <div id="figura1"> <svg width = "700" height = "700"> </svg> </div> </body>
Al guardar ahora el archivo HTML y visualizarlo nuevamente, veremos por fin la figura:
Excelente información, gran aporte al blog.