d3-visualization

Create an SVG container with margins, build a scaleBand for categories and a scaleLinear for values, then bind data with the join pattern to create rect elements. Add axes with d3.axisBottom and d3.axisLeft, remembering to invert the y range so high values appear at the top.

Use D3 when chart libraries lack your specific design, you need full customization, or you are building network graphs, hierarchies, or geographic maps. Prefer simpler libraries for basic bar and line charts, and avoid D3 for 3D rendering or datasets over 10K points without aggregation.

Encapsulate rendering in an update function, recalculate scale domains, re-bind data with a key function like d => d.id for object constancy, and add transitions before attribute updates. Trigger the function on data changes from timers, WebSockets, or API responses.

By default, data joins match elements by array index, so reordered data breaks element identity. Pass a key function such as .data(newData, d => d.id) so elements track data items by a unique identifier rather than position.

Yes, D3 renders maps from GeoJSON using projections like geoMercator, geoAlbersUsa, or geoOrthographic combined with d3.geoPath. Use fitExtent to auto-scale the projection to your SVG bounds, and build choropleths by joining data values to feature IDs.