🌍 Public
Viewing a saved revision (read-only)
da0293ed9c3f44dfbe4f3432b3fe66e4
Bar Chart with Axis
This example displays a horizontal bar chart showing population data for 15 countries, with a categorical y-axis for country names and a linear x-axis for population values. The chart is built with React state management, using the `useState` and `useEffect` hooks to asynchronously load CSV data via `d3.csv`. D3 scales (`scaleBand` and `scaleLinear`) map data to SVG coordinates, while custom text and line elements render the tick marks and gridlines. The SVG rendering approach is chosen over Canvas, with margins and inner dimensions calculated manually.
AI-generated descriptionA program that loads in some data using D3 utilities and uses React state.