Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Pperamranji
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from Activity 7

A horizontal bar chart ranks 30 countries by total population in 2020, using green bars on a white background with blue axis ticks. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to map data from a CSV hosted on GitHub, rendered as SVG `<rect>` elements. D3’s `format` function converts population values to abbreviated labels, and native SVG `<title>` elements provide hover tooltips.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the 2020 population of 30 countries, sorted in descending order with a green bar for each nation. The visualization loads CSV data from a GitHub gist and renders vector graphics using React with D3 v5, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes and bars are drawn as SVG elements via React components, with tooltips showing formatted population values.

Bbudalavijay2001@gmail.com
95% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of the top 30 countries by 2020 population, using a diverging green color for the bars. It fetches data from a CSV file via `d3.csv`, then renders with React and SVG, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. `d3.format` provides tick labels, while custom React components define the axes and bar marks with `<title>` tooltips. The visualization highlights a clean, minimal style with Poppins font and styled grid lines.

Pperamranji
94% match
Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the top 30 countries by 2020 population, with green bars extending from a shared baseline and blue tick marks along the axes. Built with React, the visualization uses D3 v5’s `scaleBand`, `scaleLinear`, and `format` utilities to map country names and population values to SVG rectangles, while the `csv` loader fetches data from a GitHub-hosted CSV file. Axis components render tick lines and labels, and hover tooltips reveal formatted population values via SVG `<title>` elements.

Mmayasuedorman@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

Pperamranji
94% match
Loading thumbnail…

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

Vvamsikrishnakanchukommala@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Rravularasesh3102@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Aanisha.peddireddy@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav
94% match