Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
RRevanth putta
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from Hello VizHub

This visualization is a horizontal bar chart that displays the top 10 most populous countries based on 2019 United Nations data, with population values shown on the x-axis and country names on the y-axis. The chart uses React to render SVG elements, with axes generated by the `AxisBottom` and `AxisLeft` components, and data bars drawn by the `Marks` component. The population data is loaded from a CSV using d3's `csv` function, and the scales are created using `scaleBand` and `scaleLinear`.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task2(Question 1)

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The horizontal bars are sorted by population, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `csv` for data loading, and renders SVG `rect` elements via the `Marks` component. The chart applies a custom Poppins font, teal bar color, and axis tick styling for a polished presentation.

SSowjanya Devupalli
92% match
Loading thumbnail…

Activity_6_Task1

This visualization displays the top 30 countries by 2020 population using a horizontal bar chart rendered as SVG within a React application. The chart uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the population values, with d3.format abbreviating numbers to billions. Data loads from a GitHub-hosted CSV file via d3.csv, and React hooks manage the asynchronous data fetching. Custom AxisBottom and AxisLeft components generate the axes, while Marks renders each bar with a tooltip showing the formatted population value.

Pparvathi829790@gmail.com
91% match
Loading thumbnail…

Activity6_Task1

This visualization shows the top 30 countries by population in 2020 using a horizontal bar chart built with React and D3 v5. Each bar’s length encodes population via a linear scale (`d3.scaleLinear`), while countries are positioned along a band scale (`d3.scaleBand`). The code fetches CSV data from a GitHub repository, formats population values, and renders SVG rectangles with tooltips. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks, with axis tick formatting converting values to billions using `d3.format`.

Ggnanendra097@gmail.com
91% match
Loading thumbnail…

activity 6_Task 1

This visualization displays a horizontal bar chart comparing the populations of the top 20 countries in 2010, with bars sorted by population size. Built with React and D3 v7, it loads data from a CSV file via `d3.csv` and renders the chart as SVG. The chart uses `scaleBand` for the y-axis (country names) and `scaleLinear` for the x-axis (population), with bars drawn as SVG rectangles. The code demonstrates custom axis components, tick formatting that converts large numbers to "B" for billions, and tooltips on hover showing population values.

Jjangalaupender@my.unt.edu
91% match
Loading thumbnail…

activity 6_Task 1.2

This bar chart visualizes the top 20 countries by population for the year 2010, using a horizontal layout with countries on the y-axis and population on the x-axis. It uses React with D3 v5 scales (scaleBand, scaleLinear) to position SVG rectangles, with axis components rendering ticks and labels. Data loads from a CSV via d3.csv, and tooltips display formatted population values using d3.format.

Ssanjanaadapa7@gmail.com
91% match
Loading thumbnail…

Activity6_Task1.1

This bar chart displays the top 10 countries by population in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scales and formatting functions (scaleBand, scaleLinear, format) to position bars and transform tick labels. Population data is loaded from a CSV file via d3.csv and prepared in a custom useData hook. Each bar includes a native SVG tooltip showing the formatted population value.

Ssunny.musku2631@gmail.com
91% match
Loading thumbnail…

Activity 6 Task 1.1

This bar chart displays the population of ten countries in the year 2000, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React with D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` for fetching data from a GitHub repository. SVG rectangles render the marks, with axis ticks and labels styled through CSS. The chart sorts and slices the loaded dataset to show the top ten most populous countries.

BBamanGayathri
91% match
Loading thumbnail…

Activity6_Task1Question2

This visualization displays the top 20 most populous countries in 2010 as a horizontal bar chart, with population values encoded by bar width and country names listed on the y-axis. The chart uses React with D3 v5 APIs, including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements rendered through a custom `Marks` component. Population data is loaded from a CSV file using `d3.csv`, sorted descending, and formatted with D3's `format('.2s')` to convert numbers into billions. Axis ticks are styled with CSS classes.

Kkamalini.ponnuru11@gmail.com
91% match