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 Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ACTIVITY_06

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.

Rragasrikakarla27@gmail.com
95% match
Loading thumbnail…

Activity-6

This example shows the populations of 30 countries in 2020 as horizontal bars. A bar chart uses a linear scale for population values on the x-axis and a band scale for country names on the y-axis. The visualization is rendered with React and D3 v5’s `scaleBand`, `scaleLinear`, and `format` APIs, drawing SVG rectangles as marks. Data loads from a CSV file, and tooltips display formatted population values.

KKavyaEti
94% match
Loading thumbnail…

Activity 6

This example shows a horizontal bar chart comparing the 2020 population of 30 countries. The chart uses D3.js v5 scales to map country names and population values to the SVG canvas, with each bar's length proportional to its population. The bars are rendered as SVG rectangles, and hovering over a bar displays its formatted population value in a tooltip. The React application loads the data from a remote CSV file and uses D3's `scaleBand` and `scaleLinear` for positioning, with custom axis components for the bottom and left edges.

Mm.maanvireddt761@gmail.com
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
Loading thumbnail…

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
93% match
Loading thumbnail…

Activity-6

This horizontal bar chart displays the populations of 30 countries for the year 2020, ordered along the y-axis. Built with React and D3 v5, it renders as an SVG, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, with data loaded from a CSV file. The bars’ widths encode population values, and a tooltip (via the SVG `<title>` element) shows the formatted value on hover.

Mmanisahiths54321@gmail.com
93% 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
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