Skip to main content
SimilarExport ZIP
100%

Activity 6_task 1

✓ Published1🌍 Public
SSuneelKalva@my.unt.edu
Last edited Apr 5, 2025
Created on Apr 5, 2025
Forked from Activity 6_task 1

This horizontal bar chart visualizes the 2020 population estimates for 30 countries, sorted in descending order from the top. The visualization employs a React and D3 v5 stack, using `scaleBand` for the categorical country axis and `scaleLinear` for the numerical population axis, rendered as SVG rectangles. Data is loaded from a CSV file, with population values formatted using `d3.format` and tooltips that display the abbreviated figure (e.g., "1.4B"). The chart includes styled axes with blue tick lines and a green fill for the bars, with hover effects changing the bar color.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

Mmeenam1106@gmail.com
95% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays 2020 population estimates for 30 countries, ranked by country name on the y-axis and population on the x-axis. The visualization uses SVG rendering within a React component, with D3 v5 scale functions (`scaleBand`, `scaleLinear`) for positioning, and custom `AxisBottom` and `AxisLeft` components for ticks. Data loads asynchronously from a CSV file via `d3.csv` and formats axis labels using `d3.format`. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Aanisha.peddireddy@gmail.com
95% match
Loading thumbnail…

activity6task-1

This bar chart displays the 2020 population estimates for 30 countries, with horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data loads from a CSV via `d3.csv` and renders as SVG `<rect>` elements. The bottom axis formats tick values using `d3.format`, and tooltips show population values on hover.

Ssriharshakondakindi@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 population of 30 countries, ranked vertically with horizontal bars extending to represent population size. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric population axis, with a zero baseline. The data is loaded from a CSV file and formatted using `d3.format` to abbreviate large numbers. SVG rectangles render the bars, with tooltips showing exact population values on hover.

YYeruva Snehith Reddy
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name along the vertical axis. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, with SVG rectangles rendered via the `Marks` component. Horizontal axis labels apply D3’s `format` with a custom `.2s` tick formatter to abbreviate large numbers (e.g., “B” for billions). Data is loaded asynchronously from a CSV via `d3.csv` and multiplied by 1000 for actual population values.

Ssumanthpenna0221@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name on the y-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical axis and `scaleLinear` for the population values, rendering SVG rectangles whose lengths encode the data. Tooltips show formatted population numbers via the `title` element. The x-axis uses `format('.2s')` to abbreviate values in billions, while the data is fetched from a CSV file.

Aanusha.chilkamarri26@gmail.com
94% match
Loading thumbnail…

Activity 6_task 1

This bar chart displays the 2020 population estimates for 30 countries, sourced from a CSV file loaded via d3.csv. The visualization uses React with D3 v5, employing scaleBand and scaleLinear for axes and rendering SVG rectangles for each bar. The chart includes labeled axes with formatted tick values, converting billions to a readable format, and tooltips showing exact population values on hover.

Ttallapanenisahithi@gmail.com
94% match
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
94% match