D3 Visualization

D3.js Visualization

Create sophisticated, interactive data visualizations using D3.js with precise control over every visual element.

Prerequisites

• JavaScript/TypeScript environment
• Understanding of SVG basics

Instructions

When to Use D3.js

Use D3.js for:

• Custom visualizations requiring unique visual encodings
• Interactive explorations with pan, zoom, brush behaviors
• Network/graph visualizations (force-directed, trees, hierarchies)
• Geographic visualizations with custom projections
• Smooth, choreographed transitions
• Publication-quality graphics

Consider alternatives for:

• 3D visualizations (use Three.js)
• Simple charts (use Chart.js or similar)

Setup

import * as d3 from 'd3';
// or CDN
// <script src="https://d3js.org/d3.v7.min.js"></script>

Core Workflow

Pattern A: Direct DOM Manipulation (Recommended)

function drawChart(data) {
  const svg = d3.select('#chart')
    .append('svg')
    .attr('width', 800)
    .attr('height', 400);

  svg.selectAll('rect')
    .data(data)
    .join('rect')
    .attr('x', (d, i) => i * 50)
    .attr('y', d => 400 - d.value)
    .attr('width', 40)
    .attr('height', d => d.value)
    .attr('fill', 'steelblue');
}

Pattern B: React Integration

function Chart({ data }) {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    // D3 bindings here
  }, [data]);

  return <svg ref={svgRef} />;
}

Key Concepts

• Scales: Map data domains to visual ranges
• Axes: Generate axis elements from scales
• Shapes: Paths, arcs, lines, areas
• Transitions: Animate between states
• Layouts: Force, tree, pack, partition

Guidelines

1. Use join() for enter/update/exit patterns
2. Separate data transformation from rendering
3. Use scales for all data-to-visual mappings
4. Add transitions for smooth updates
5. Make visualizations responsive with viewBox

Notes

• Works in any JavaScript environment (vanilla, React, Vue, Svelte)
• All modules accessible through d3 namespace
• Publication-quality output with fine-grained control

Source: chrisvoncsefalvay/claude-d3js-skill