Estudio de D3.js

• Vinculación de datos con el DOM
• Gráficos complejos
• Manipulación dinámica de documentos basada en datos

• Visualización de datos interactiva
• Gráficos personalizados
• Conjuntos de datos complejos en el navegador

Instalación: npm i d3

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

1. Gráfico de barras con escala

Dibuja barras en SVG a partir de datos con escala lineal.

import { select } from 'd3-selection';
import { scaleLinear, scaleBand } from 'd3-scale';

const data = [{ n: 'A', v: 10 }, { n: 'B', v: 30 }, { n: 'C', v: 20 }];
const x = scaleBand().domain(data.map(d => d.n)).range([0, 300]).padding(0.2);
const y = scaleLinear().domain([0, 40]).range([120, 0]);

select('#g').selectAll('rect')
  .data(data).join('rect')
  .attr('x', d => x(d.n)).attr('y', d => y(d.v))
  .attr('width', x.bandwidth()).attr('height', d => 120 - y(d.v))
  .attr('fill', 'orange');

2. Scatter con ejes

Puntos en un plano cartesiano con ejes.

import { select } from 'd3-selection';
import { scaleLinear } from 'd3-scale';
import { axisBottom, axisLeft } from 'd3-axis';

const pts = [[2,3],[5,8],[7,2],[9,7]];
const x = scaleLinear().domain([0,10]).range([0,300]);
const y = scaleLinear().domain([0,10]).range([150,0]);

select('#g').selectAll('circle').data(pts).join('circle')
  .attr('cx', p => x(p[0])).attr('cy', p => y(p[1])).attr('r', 5);
select('#g').append('g').call(axisBottom(x)).attr('transform', 'translate(0,150)');