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