d3-viz

Create a band scale for categories on the x-axis and a linear scale for values on the y-axis, then bind data to rect elements using the join pattern. Set each rect's x position from the band scale, width from bandwidth(), and height from the inverted y-scale.

Use d3 for calculations like scales and layouts while letting React render the elements, or use a ref with direct DOM manipulation inside an effect. The declarative pattern returns computed attributes that React maps to SVG elements.

Use scaleLinear for continuous numeric data, scaleBand for categorical bar charts, scaleTime for dates, scaleLog for data spanning orders of magnitude, and scaleOrdinal for category colours. Use scaleSqrt when encoding values as circle radii for accurate area perception.

Transitions fail when .transition() is called after attribute changes instead of before, or when data binding lacks a key function for object constancy. Ensure elements have stable keys and call .transition() before modifying attributes.

Avoid d3.js for 3D visualisations, where Three.js is the appropriate tool. For simple standard charts with no custom interactions, a higher-level charting library may require less code than d3's low-level API.

Use a ResizeObserver or window resize listener to detect container size changes, then update the SVG width and height attributes and redraw the visualisation. Return a cleanup function that removes the listener when the component unmounts.