d3js-data-visualization

D3.js Data Visualization

Build sophisticated, interactive data visualizations using d3.js (Data-Driven Documents). D3 binds data to DOM elements and applies data-driven transformations to produce publication-quality, fully customizable visuals.

When to Use This Skill

• Custom charts requiring unique visual encodings or layouts
• Interactive visualizations with pan, zoom, or brush behaviors
• Network/graph visualizations (force-directed, tree, hierarchy, chord diagrams)
• Geographic visualizations with custom projections
• Smooth, choreographed transitions and animations
• Novel chart types not available in standard libraries (Recharts, Chart.js, etc.)
• Fine-grained SVG styling and accessibility control

Consider alternatives for:

• 3D visualizations → use Three.js
• Simple standard charts with minimal customization → use Chart.js or Recharts

Required Tools / Libraries

No backend required. Runs entirely in the browser or Node.js (with jsdom/canvas).

# Install via npm
npm install d3

# Or use CDN in HTML
<script src="https://d3js.org/d3.v7.min.js"></script>

Core Workflow

1. Set Up D3

import * as d3 from 'd3';

2. Standard Chart Structure

Every d3 visualization follows this pattern:

function drawChart(data) {
  if (!data || data.length === 0) return;

  const svg = d3.select('#chart');
  svg.selectAll("*").remove(); // clear previous render

  const width = 800, height = 400;
  const margin = { top: 20, right: 30, bottom: 40, left: 50 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  // Define scales
  const xScale = d3.scaleLinear().domain([0, d3.max(data, d => d.x)]).range([0, innerWidth]);
  const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([innerHeight, 0]);

  // Axes
  g.append("g").attr("transform", `translate(0,${innerHeight})`).call(d3.axisBottom(xScale));
  g.append("g").call(d3.axisLeft(yScale));

  // Data elements
  g.selectAll("circle")
    .data(data)
    .join("circle")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5)
    .attr("fill", "steelblue");
}