Ejemplo de uso de la librería d3.js

Como en el capítulo de funciones se utilizaba la librería Function Plot basada en la que se va a utilizar ahora, los pasos para su instalación y posterior uso son los mismos. Por lo tanto, para introducir gráficos realizados con D3.js en cualquier HTML se necesita tener cargada la librería D3.js en el HTML, por tanto, se necesita el siguiente archivo:

d3.zip que se puede obtener desde la página web oficial, el cuál hay que descomprimir.

También existe un formato "comprimido" que tiene un menor tamaño por lo que se cargará mucho más rápido que el original. Este D3 comprimido se puede descargar desde el repositorio de Github.

Para referenciar a D3 se seguirán los siguientes pasos.

Se creará un archivo HTML de nombre index.html. En dicho archivo, la estructura tiene que ser similar a lo siguiente:


			project-folder/
				d3/
					d3.v4.js
					d3.v4.min.js (opcional)
			index.html

A continuación se copiará el siguiente código en la sección <\head> :


			<head>
			<script src="https://d3js.org/d3.v4.min.js"></script>
			</head>

Una vez que se tiene cargada la librería en el HTML que se desea trabajar, lo siguiente es usarla para hacer los gráficos, por ejemplo, para realizar un diagrama de barras como el siguiente:

También se pueden hacer diagramas de dispersión:

Este ejemplo está inspirado en este tutorial.