Guía de Inicio: D3.js por Observable
Resumen
Guía oficial de inicio para la librería D3.js desarrollada por Observable. Explica las diferentes opciones para comenzar a trabajar con visualización de datos dinámica, desde plataformas interactivas en la nube hasta integraciones en Vanilla HTML (CDN/ESM) y frameworks modernos.
Formas de Empezar con D3
1. En Línea con Observable
La forma más rápida de prototipar y experimentar con D3.js es a través de Observable:
- D3 está integrado por defecto en su librería estándar de notebooks.
- Permite generar y retornar elementos DOM en celdas interactivas.
- Incluye plantillas para gráficos de barras, áreas, líneas, donas e histogramas, así como datasets de muestra.
2. Vanilla HTML (Navegador)
Para entornos web tradicionales, se puede cargar D3.js desde un CDN (como jsDelivr) o alojarlo localmente:
- Módulo ES (Recomendado):
<div id="container"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
// Configuración de escalas, ejes y SVG
const svg = d3.create("svg").attr("width", 640).attr("height", 400);
container.append(svg.node());
</script>
- Bundle UMD (Script Tradicional):
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
// Acceso global mediante window.d3
</script>
3. Frameworks y Entornos Modernos
D3.js funciona en cualquier entorno de JavaScript (React, Svelte, Vue, Next.js, Node.js) instalando el paquete mediante gestores de dependencia:
npm install d3
