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 .join(). Set each rect's x, y, width, and height from the scales and append axes with d3.axisBottom and d3.axisLeft.

Use a ResizeObserver or window resize listener to read the container's bounding rectangle, then update the SVG width and height attributes and redraw the visualisation. Return a cleanup function that disconnects the observer when the component unmounts.

Yes, d3 works in any JavaScript environment. Use direct DOM manipulation for complex visualisations with transitions, or use d3 only for scales and layout calculations while rendering elements declaratively through your framework's templating.

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

Axes fail when scales have invalid domains containing NaN 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.

Use d3.interpolateViridis or d3.interpolateCividis for sequential data and the Okabe-Ito categorical palette for categories. Avoid red-green diverging combinations; prefer blue-orange schemes like d3.interpolatePuOr or d3.interpolateBrBG.