Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published1🌍 Public
MMandadi Nishita
Last edited Oct 20, 2024
Created on Oct 20, 2024
Forked from Hello VizHub

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 population of 30 countries, sorted from largest to smallest on the y-axis. The visualization uses React with D3 v5 scales, where `scaleBand` positions the country bars and `scaleLinear` maps population values to bar widths. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that format tick labels, and each bar contains a native HTML `<title>` tooltip showing the exact population value. Data is loaded from an external CSV file using D3's `csv` function.

JJhansi Balla
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart shows the 2020 population of 30 countries, sorted from largest at the top to smallest at the bottom. The visualization uses React components with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering marks as SVG rectangles. Data is loaded via d3.csv from a GitHub-hosted dataset, with population values formatted using d3.format. The chart includes labeled axes and a tooltip showing the exact population value for each bar on hover.

Kkoushikkumarreddykoorapati@my.unt.edu
95% match
Loading thumbnail…

Activity-6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, ordered from largest at the top to smallest at the bottom. Each bar’s length represents population in billions, with a labeled x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, scales it using d3.scaleBand and d3.scaleLinear, and renders SVG rectangles through React components. D3’s format function abbreviates large numbers, while the code also defines reusable AxisBottom, AxisLeft, and Marks components.

Tthoutunikhitha@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population of 30 countries, ranked from largest to smallest. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) positioning bars and axes. Population values are formatted with D3's Si-prefix format, converting billions to "B" notation. Data loads from a remote CSV file via d3.csv, and tooltips reveal precise population values for each bar.

Mmohanalaharic@gmail.com
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 population for 30 countries, ranked by country name along the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` for positioning, while SVG rectangles render the bars with a native `<title>` tooltip showing formatted values. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with axis ticks and labels generated by custom React components.

SSeema Shrestha
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

SSahithi.R
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React components to render SVG elements, with D3’s scaleBand and scaleLinear handling the spatial mapping and d3.csv loading population data from a GitHub-hosted CSV file. Axis components generate tick marks and labels, while a formatter converts large numbers into abbreviated values like “1.2B” for readability.

Vvikramkotlo9@gmail.com
94% match