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

This fork of Activity 7 visualizes the populations of 20 countries for a chosen year (2010 or 2000) as horizontal bar charts. Using React with D3 v5 scales (scaleBand and scaleLinear), it renders SVG rectangles whose widths map to population values, with formatted axis ticks and tooltips. The data is loaded from a remote CSV file via D3's `csv` function and limited to the first 20 rows.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays the populations of the first 30 countries from a CSV dataset for the year 2020 as horizontal bars. Built with React and rendered as SVG, it uses D3 v5 functions `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with axis ticks from custom React components. The chart loads data via `d3.csv`, formats population values on the x-axis using `d3.format`, and provides hover tooltips.

Cchowdaryhemanth14@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% match
Loading thumbnail…

Fork of Activity

This visualization shows the 2010 population of 20 countries as a horizontal bar chart. The code loads data from a CSV file and renders bars as SVG rectangles using React, with axes built from D3 v5's `scaleBand` and `scaleLinear`. Tooltips display population values using D3's `format` function, and the chart applies margins and axis labels within a fixed 960x500 viewport.

Ssathvik0311@gmail.com
93% 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
93% match
Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, loaded from a CSV file. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Axes are generated with custom React components, and a tooltip using SVG `<title>` elements reveals precise values. The chart is formatted with D3's `format` function to abbreviate large numbers.

MManideeprenikindi
93% match
Loading thumbnail…

Fork of Activity 7

This example visualizes the 2020 population of 30 countries using a horizontal bar chart. The SVG renders through React components, with d3.scaleBand positioning countries on the y-axis and d3.scaleLinear mapping population values to bar lengths on the x-axis. Axis tick labels use d3.format with the '.2s' specifier to abbreviate values, replacing 'G' with 'B' for billions. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Ppavanbellam@my.unt.edu
93% match
Loading thumbnail…

Fork of Fork of Activity 7

This chart displays the populations of twenty countries in 2020 as horizontal bars, sorted by country name along the vertical axis and scaled linearly by population along the horizontal axis. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` handling the axis mappings and `format` producing the tick labels. Data is fetched via `d3.csv` from a remote GitHub-hosted CSV file, and each bar includes a tooltip showing its formatted population value.

Ssairamisetti3829@gmail.com
93% match