D3.js - Instalación

En este capítulo, aprenderemos cómo configurar el entorno de desarrollo D3.js. Antes de comenzar, necesitamos los siguientes componentes:

  • Biblioteca D3.js
  • Editor
  • navegador web
  • Servidor web

Repasemos los pasos uno por uno en detalle.

Biblioteca D3.js

Necesitamos incluir la biblioteca D3.js en su página web HTML para usar D3.js para crear visualización de datos. Podemos hacerlo de las siguientes dos formas:

  • Incluya la biblioteca D3.js de la carpeta de su proyecto.
  • Incluya la biblioteca D3.js de CDN (Content Delivery Network).

Descargar la biblioteca D3.js

D3.js es una biblioteca de código abierto y el código fuente de la biblioteca está disponible gratuitamente en la web en https://d3js.org/sitio web. Visite el sitio web de D3.js y descargue la última versión de D3.js (d3.zip). A partir de ahora, la última versión es 4.6.0.

Una vez completada la descarga, descomprima el archivo y busque d3.min.js. Esta es la versión minimizada del código fuente de D3.js. Copie el archivo d3.min.js y péguelo en la carpeta raíz de su proyecto o en cualquier otra carpeta, donde desee guardar todos los archivos de la biblioteca. Incluya el archivo d3.min.js en su página HTML como se muestra a continuación.

Example - Consideremos el siguiente ejemplo.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js es un código JavaScript, por lo que debemos escribir todo nuestro código D3 dentro de la etiqueta "script". Es posible que necesitemos manipular los elementos DOM existentes, por lo que es aconsejable escribir el código D3 justo antes del final de la etiqueta "body".

Incluir biblioteca D3 de CDN

Podemos usar la biblioteca D3.js vinculándola directamente a nuestra página HTML desde Content Delivery Network (CDN). CDN es una red de servidores donde los archivos se alojan y se entregan a un usuario según su ubicación geográfica. Si usamos el CDN, no necesitamos descargar el código fuente.

Incluya la biblioteca D3.js usando la URL de CDN https://d3js.org/d3.v4.min.js en nuestra página como se muestra a continuación.

Example - Consideremos el siguiente ejemplo.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Editor de D3.js

Necesitaremos un editor para comenzar a escribir su código. Hay algunos IDE (entorno de desarrollo integrado) excelentes con soporte para JavaScript como:

  • Código de Visual Studio
  • WebStorm
  • Eclipse
  • Texto sublime

Estos IDE proporcionan finalización inteligente de código y admiten algunos de los marcos de JavaScript modernos. Si no tiene un IDE elegante, siempre puede usar un editor básico como Notepad, VI, etc.

Navegador web

D3.js funciona en todos los navegadores excepto IE8 y versiones anteriores.

Servidor web

La mayoría de los navegadores sirven archivos HTML locales directamente desde el sistema de archivos local. Sin embargo, existen ciertas restricciones cuando se trata de cargar archivos de datos externos. En los últimos capítulos de este tutorial, cargaremos datos de archivos externos comoCSV y JSON. Por lo tanto, será más fácil para nosotros si configuramos el servidor web desde el principio.

Puede utilizar cualquier servidor web con el que se sienta cómodo, por ejemplo, IIS, Apache, etc.

Viendo su página

En la mayoría de los casos, podemos abrir su archivo HTML en un navegador web para verlo. Sin embargo, al cargar fuentes de datos externas, es más confiable ejecutar un servidor web local y ver su página desde el servidor.(http://localhost:8080).