Skip to main content
SimilarExport ZIP
100%

ACTIVITY_06

✓ Published0🌍 Public
Rragasrikakarla27@gmail.com
Last edited Oct 30, 2025
Created on Oct 30, 2025
Forked from Activity 7

This visualization shows the populations of 30 countries in 2020 as a horizontal bar chart, ranked by country name on the y-axis and population magnitude on the x-axis. The code loads CSV data via d3.csv, scales the population values into billions, and renders SVG bars using React components for the axes and marks. It uses d3.scaleBand and d3.scaleLinear for positioning, with tooltips formatted via d3.format. The data source is a raw GitHub-hosted CSV file, and the chart is styled with blue axis lines and green bars.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ACTIVITY_06

This example presents a horizontal bar chart comparing the populations of 30 countries in the year 2020. Each bar's length represents a country's population, and the data is sourced from a remote CSV file. The visualization is built with D3 v6 and React, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `format` to display values in billions. The chart is rendered as an SVG, with custom components for axes and data marks, and includes a tooltip that formats population values for clarity.

Rragasrikakarla27@gmail.com
95% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React components render the SVG elements. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers, for example converting Gigas to Billions. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

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

Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, ordered by country name, with green bars and blue axis lines. The visualization loads a CSV file from a GitHub gist using D3's `csv` function, then renders the data as SVG rectangles via React. D3's `scaleBand` and `scaleLinear` position the bars, while custom `AxisBottom` and `AxisLeft` components generate ticks using D3's `ticks` and `domain` methods. Population values are formatted with D3's `format` function using the SI format to abbreviate large numbers.

Kkesava
94% match
Loading thumbnail…

Activity 6

This visualization displays the populations of 30 countries in 2020 using a horizontal bar chart, where each bar represents a country and its length is proportional to the population value. The chart includes labeled axes for countries and population, with population values formatted in a compact notation (e.g., "B" for billions). The visualization is built using React and D3 v5, with D3's `scaleBand` and `scaleLinear` functions handling the categorical and numerical scales. SVG rectangles are used to render the bars, and tooltips provide exact population values on hover. The data is loaded from a remote CSV file and processed using D3's `csv` function.

Rrishithagovini99@gmail.com
94% match
Loading thumbnail…

Activity_6

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file via the D3 `csv` function. The visualization uses React to render SVG elements, with D3's `scaleBand` and `scaleLinear` mapping country names and population values to positions. Tooltips reveal exact population figures, and axes include custom tick formatting that abbreviates large numbers. The chart applies a green fill to marks and a blue stroke to axis lines.

Ssanjanadadi19@gmail.com
93% match
Loading thumbnail…

Activity 6

This visualization displays the population of 30 countries in 2020 using horizontal bar charts rendered as SVG rectangles. The bars are sorted by country name along the y-axis, with x-axis lengths scaled proportionally to population values, formatted in billions. Built with React and D3 v5, the implementation uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load data from a GitHub-hosted dataset. Tooltips show formatted population values via SVG `<title>` elements.

Jjasthilavanya2022@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart shows the populations of 30 countries in 2020, sorted by country name. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for the axes and data mapping. Population values are formatted in billions using d3.format, and the data is loaded from a remote CSV via d3.csv. Each bar includes a native SVG tooltip that displays the formatted population value.

GGunna,Praneeth Reddy
93% match
Loading thumbnail…

Activity_6

This horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name along the y-axis and population size along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric scale, and SVG `rect` elements for bars. Data loads from a CSV via the `csv` function, with population values converted from thousands, and axes are rendered by custom React components.

Ssanjanadadi19@gmail.com
93% match