Estudio de Visualización de Datos con JavaScript

🛠️ D3.js — el estándar para visualizaciones custom

Stars 112k · SVG · Open source (ISC) · Mantenido por Observable. "The JavaScript library for bespoke data visualization". Curva alta, máxima flexibilidad. En React: módulos no-DOM (d3-scale, d3-array) en JSX; módulos DOM (d3-selection) con ref + useEffect.

// script minimalista (d3-scale — seleccionar escala)
import { scaleLinear } from 'd3-scale';
const x = scaleLinear().domain([0, 100]).range([0, 500]);
console.log(x(50)); // 250

⚛️ Recharts — gráficos React declarativos

Stars 26k · SVG · MIT · Encima de D3 con componentes nativos de React. Leyendas, tooltips y labels integrados. TypeScript sólido. >470 issues abiertos.

// npm i recharts
import { BarChart, Bar } from 'recharts';
<BarChart width={400} height={200} data={data}>
  <Bar dataKey="ventas" fill="#5ad1e6" />
</BarChart>

📱 Victory — React Native cross-platform

Stars 11.2k · SVG · MIT · Componentes modulares para React y React Native (Nearform). ARIA fuerte out-of-the-box. API consistente web/móvil.

// npm i victory
import { VictoryBar } from 'victory';
<VictoryBar data={[{x:1,y:2},{x:2,y:4}]} />

📈 Chart.js — el default (Canvas)

Stars 66.6k · Canvas · MIT · La más descargada (millones/semana). 8 tipos core (~16 con extensiones). v4+: tree-shaking, mejor TypeScript. Friendly para principiantes.

// npm i chart.js
import Chart from 'chart.js/auto';
new Chart(document.getElementById('g'), {
  type: 'bar',
  data: { labels: ['A','B'], datasets: [{ data: [10, 20] }] },
});

🚀 Apache ECharts — enterprise a escala

Stars 64.7k · Canvas/SVG/WebGL (GL) · Apache 2.0 · Antes Baidu, ahora Apache. >20 tipos, progressive rendering, TypedArray; documenta 10M puntos en real-time. v6 actual.

// npm i echarts
import * as echarts from 'echarts';
const chart = echarts.init(document.getElementById('g'));
chart.setOption({ xAxis: {}, yAxis: {}, series: [{ type: 'bar', data: [5,20] }] });

🧩 ApexCharts · Nivo · Chartkick

🏢 Comerciales: Flexmonster · WebDataRocks · amCharts · CanvasJS · Highcharts · ZoomCharts

🧬 Vega / Vega-Lite — gramática declarativa

Stars 11.7k · Canvas o SVG · BSD-3 · UW Interactive Data Lab. Spec JSON declarativa: describes QUÉ visualizar y Vega resuelve CÓMO. Vega-Lite es más conciso; ambos compilan al mismo engine. Python vía Altair.

// Vega-Lite spec (declarativo)
{ "mark": "bar",
  "data": { "values": [{a:"A",b:10},{a:"B",b:20}] },
  "encoding": { "x": {"field":"a"}, "y": {"field":"b"} } }

1. ¿Qué tipos de charts? (Sankey/Gantt elimina opciones rápidamente)
2. ¿Tamaño del dataset? — responde con tu peor caso realista
3. ¿Web, móvil o ambos? — Victory = React Native
4. ¿Soporte de navegadores? — según tus analíticas
5. ¿Qué framework? — React → Recharts/Nivo; agnóstico → Chart.js/D3/ECharts
6. ¿Personalización visual? — D3 = máximo control/esfuerzo
7. ¿TypeScript? — Recharts, Highcharts, amCharts fuertes
8. ¿Activa? — GitHub, cadencia, issues, comunidad