🌍 Public
Line Chart
This example displays the population of the top 10 countries from the UN Population 2019 dataset. It renders a horizontal bar chart with labeled axes and SVG rectangles. Using d3’s `scaleBand` and `scaleLinear`, it maps categorical country names to the y-axis and population values to the x-axis. The population is formatted with d3’s `format` (e.g., “B” for billions) and converted to an interactive tooltip via the `<title>` element. React state and the `useData` hook, along with d3’s `csv` parser, load and filter the data. The chart includes styled ticks and axis labels from a custom Poppins font.
AI-generated descriptionA program that loads in some data about CSS named colors using d3 utilities, and uses React state to keep track of the data.
MIT Licensed
Comments
Sign in to join the discussion.