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(). Append axes with d3.axisBottom and d3.axisLeft inside a margin-offset group.

Use d3 for scales and layout calculations while letting the framework render elements declaratively, or let d3 manipulate the DOM directly inside a ref or lifecycle hook. Clear previous renders with svg.selectAll("*").remove() before redrawing.

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.

Yes, d3.js charts become responsive by listening to window resize events or using ResizeObserver on the container, then updating SVG width and height attributes and redrawing. Return a cleanup function to remove listeners when components unmount.

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 data with filters and check that domains use d3.max or d3.extent correctly.

For datasets over 1000 elements, render to canvas instead of SVG, use .join() instead of separate enter/update/exit selections, debounce resize handlers, and simplify paths. Quadtrees help with collision detection in dense layouts.