d3-viz

Use d3.scaleBand for the categorical x-axis and d3.scaleLinear for the value y-axis, then bind data to rect elements with the join pattern. Set each rect's x, y, width, and height from the scales, and append axes with d3.axisBottom and d3.axisLeft.

Two patterns work: let d3 manipulate the DOM directly inside a ref and effect, or use d3 only for calculations like scales and layouts while React renders the elements declaratively. Use direct DOM manipulation for complex transitions and interactions.

Use d3.js for custom visual encodings, force-directed networks, geographic projections, choreographed transitions, or chart types unavailable in standard libraries. For 3D visualisations, use Three.js instead, as d3 is not designed for that.

Axes fail when scale domains contain NaN or invalid values, when the axis is appended to the wrong group, or when transform translations are incorrect. Validate your data first and verify the axis group is appended inside the margined container.

Attach a window resize listener or a ResizeObserver to the container, read its bounding rectangle, update the SVG width and height attributes, and redraw the visualisation with the new dimensions. Return a cleanup function to remove the listener.

Use d3.interpolateViridis or d3.interpolateCividis for sequential data, d3.interpolatePuOr or d3.interpolateBrBG for diverging data, and the Okabe-Ito palette for categorical data. Avoid red-green combinations, which affect roughly 8% of males.