🌍 Public
Viewing a saved revision (read-only)
b9f8f46576d6402d9b3e9e740d34ed92
React and D3 - Barchart with margins and axes
This example demonstrates a horizontal bar chart that visualizes the top 10 countries by population in 2020, using data loaded via d3.csv from a GitHub gist. The chart displays bars with quantitative x-axis tick lines and categorical y-axis country labels, all rendered as SVG elements within a React component. It combines React’s useState and useEffect hooks for asynchronous data loading with d3.scaleBand, d3.scaleLinear, and d3.max to compute the scales. The visualization applies explicit margins to position the plotting area, and renders axes and bars as SVG lines, texts, and rects.
AI-generated descriptionloads data with d3 and react