🌍 Public
ICE-6: Rendering Marks and Channels with React D3
Mmanishcheruku
Last edited Mar 11, 2023
Created on Mar 10, 2023
Forked from Fork of United Nations Bar Chart with SVG
This visualization displays a horizontal bar chart of the top 15 countries by basic cost using 2019 World Population data. The chart renders as an SVG within a React app, with blue grid lines and numeric labels along the x-axis and country names on the y-axis. The code uses React hooks (`useState`, `useEffect`) to load and manage CSV data via `d3.csv`, then applies `scaleBand` for categorical positioning and `scaleLinear` for quantitative scaling. D3’s `max` function computes the domain for the cost values.
AI-generated descriptionBasic Bar Chart [Data Wold Population 2019] (https://gist.githubusercontent.com/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv) Loading using React and D3
MIT Licensed
Comments
Sign in to join the discussion.