Antes de comenzar a crear visualizaciones con D3, es crucial establecer correctamente nuestro entorno de trabajo. En este capítulo, abordaremos los pasos necesarios para instalar y configurar D3 en tu proyecto.

Instalación

Incluyendo D3 desde una CDN

La forma más rápida y sencilla de comenzar a usar D3 es incluyendo la biblioteca desde una CDN (Content Delivery Network). Puedes agregar D3 a tu proyecto HTML de esta manera:

html

Instalación mediante npm

Si prefieres un enfoque más avanzado y estás usando un gestor de paquetes como npm, puedes instalar D3 con el siguiente comando:

sh

Luego, puedes importar D3 en tu archivo JavaScript:

javascript

Configuración del Entorno de Desarrollo

Para trabajar con D3, necesitarás un editor de código. Visual Studio Code, Sublime Text o cualquier editor que prefieras funcionará bien.

Asegúrate de tener instalados Node.js y npm si planeas usar la instalación mediante npm.

Archivo de Estilo Básico

Para empezar, crearemos un archivo style.css para aplicar algunos estilos básicos a nuestras visualizaciones:

css

Estructura del Proyecto

Una estructura básica del proyecto puede ser la siguiente:

Ejemplo Básico de Configuración

Vamos a configurar un simple proyecto para asegurarnos de que todo está funcionando correctamente.

index.html

html

script.js

javascript

style.css

css

Este ejemplo simple crea un archivo index.html que carga D3 desde una CDN, un archivo script.js que dibuja un círculo en un SVG y un archivo style.css que agrega algunos estilos básicos.

Verificación

Con la configuración anterior, abre index.html en tu navegador y deberías ver un círculo azul en el centro del área SVG. Si ves esto, ¡felicidades! D3 está implementado correctamente y estás listo para comenzar a explorar sus capacidades.