🎨 Sistema de Gráficas Reutilizables - Serendipia

Demos interactivas del sistema modular de visualizaciones D3.js. Configuración mínima, diseño consistente, totalmente responsive.

1. Gráfica de Líneas - Serie Única

const chart = createLineChart({
  container: '#chart-line-simple',
  data: tempData,
  x: d => d.date,
  y: d => d.temp,
  title: 'Temperatura mensual 2024'
});

2. Gráfica de Líneas - Multi-Serie con Puntos

const chart = createLineChart({
  container: '#chart-line-multi',
  data: salesData,
  x: d => d.date,
  y: d => d.value,
  series: d => d.product,  // ← Multi-serie
  showPoints: true         // ← Mostrar puntos
});

3. Gráfica de Barras - Vertical con Valores

const chart = createBarChart({
  container: '#chart-bar-vertical',
  data: salesMonthly,
  x: d => d.month,
  y: d => d.value,
  orientation: 'vertical',
  showValues: true         // ← Números en barras
});

4. Gráfica de Barras - Horizontal

const chart = createBarChart({
  container: '#chart-bar-horizontal',
  data: countriesData,
  x: d => d.country,
  y: d => d.population,
  orientation: 'horizontal'  // ← Barras horizontales
});

5. Gráfica de Barras - Agrupadas con Leyenda

const chart = createBarChart({
  container: '#chart-bar-grouped',
  data: comparisonData,
  x: d => d.year,
  y: d => d.value,
  series: d => d.category,  // ← Agrupar por categoría
  type: 'grouped'
});

6. Gráfica con Filtros Dinámicos

// El filtro actualiza la gráfica automáticamente
const chart = createBarChart({ ... });

document.getElementById('year-filter').addEventListener('change', (e) => {
  const filtered = data.filter(d => d.year === e.target.value);
  chart.updateData(filtered);
});

7. Exportar Gráfica (PNG/SVG)

import { exportPNG, exportSVG } from './core/export.js';

exportPNG('#mi-grafica svg', {
  filename: 'grafica.png',
  scale: 2,               // ← Alta calidad
  backgroundColor: 'white'
});