D3.js

Overview

D3.js is a low-level JavaScript library for building custom, interactive data visualizations by binding data to DOM elements. It provides scales, axes, shape generators, geographic projections, force simulations, and hierarchical layouts, giving developers full control over the visual output while integrating with React through computed scales and layouts.

Instructions

• When binding data, use .data(dataset).join("element") (D3 v6+) for the enter/update/exit pattern, setting attributes and styles from bound data via accessor functions.
• When creating scales, choose the appropriate type (scaleLinear for continuous, scaleBand for categorical bars, scaleTime for dates, scaleOrdinal for color mapping) and always set domain from the data using d3.extent().
• When building axes, create them with d3.axisBottom(scale) or d3.axisLeft(scale), configure ticks and format labels with d3.format(), and regenerate on resize.
• When creating chart types, use shape generators (d3.line(), d3.area(), d3.arc(), d3.pie(), d3.stack()) and layout functions (d3.treemap(), d3.forceSimulation(), d3.geoPath()) for complex visualizations.
• When adding interactivity, use transitions (.transition().duration(750)) for smooth data updates, tooltips on hover, and brushing/zooming for exploration.
• When integrating with React, use D3 for math (scales, layouts, data transforms) and React for DOM rendering, computing values in useMemo and using useEffect with refs for D3-driven animations.

Examples

Example 1: Build a real-time dashboard with multiple chart types

User request: "Create a dashboard with line charts, bar charts, and a pie chart from API data"

Actions:

1. Set up shared scales with d3.scaleTime() for the x-axis and d3.scaleLinear() for the y-axis
2. Build a line chart using d3.line() with smooth curve interpolation and area fill
3. Build a grouped bar chart using d3.scaleBand() with staggered enter transitions
4. Build a donut chart using d3.pie() and d3.arc() with hover tooltips

Output: A responsive dashboard with animated charts that update smoothly when data changes.

Example 2: Create a force-directed network graph

User request: "Visualize relationships between entities as an interactive network graph"

Actions:

1. Set up d3.forceSimulation() with forceManyBody, forceLink, and forceCenter
2. Render nodes as circles with d3.scaleOrdinal() coloring by category
3. Add drag interaction with d3.drag() to reposition nodes
4. Implement zoom and pan with d3.zoom() and tooltips on hover

Output: An interactive force-directed graph with draggable nodes, color-coded categories, and zoom navigation.

Guidelines

• Use D3 for scales, layouts, and data processing; let React handle DOM rendering in React apps.
• Use .join() instead of manual enter/update/exit for simpler, cleaner data binding.
• Always set scale domains from data (d3.extent()) rather than hardcoding ranges.
• Use d3.format() for axis labels and tooltips: ",.0f" for thousands, "$.2f" for currency.
• Add transitions of 750ms with easeCubicInOut for smooth data update animations.
• Make visualizations responsive by recalculating scales on ResizeObserver callbacks.
• Add aria-label to SVG elements and meaningful <title> tags for accessibility.