Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published0🌍 Public
PPreethamreddyannavaram@my.unt.edu
Last edited Mar 28, 2025
Created on Mar 28, 2025
Forked from Hello VizHub

This horizontal bar chart displays the populations of 30 countries in 2020, ranked from largest to smallest on the y-axis. It uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping the categorical and quantitative variables, and axes generated by the custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV via `d3.csv`, with population values formatted in billions using `d3.format`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, ordered from largest at the top to smallest at the bottom. Each bar’s length represents population in billions, with a labeled x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, scales it using d3.scaleBand and d3.scaleLinear, and renders SVG rectangles through React components. D3’s format function abbreviates large numbers, while the code also defines reusable AxisBottom, AxisLeft, and Marks components.

Tthoutunikhitha@gmail.com
95% 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
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

MMandadi Nishita
94% match
Loading thumbnail…

activity 6 task 1

This horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest. The visualization loads data from a CSV file via `d3.csv`, processes it with React state management, and renders the chart using SVG. D3’s `scaleBand` and `scaleLinear` map countries to horizontal bars, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the ticks and rectangles. The x-axis labels are formatted using `d3.format` with a custom function that converts gigabytes to billions.

AAamani Chamarthi
94% 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
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Kkaringusathwika@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This is a horizontal bar chart displaying the 2020 populations of 30 countries, loaded from a CSV file and sorted from largest to smallest. The visualization is rendered as an SVG using React and D3 v5, with `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom `AxisBottom` and `AxisLeft` components for ticks. Green rectangles represent data values, with tooltips showing the formatted population in billions. The chart is part of a React app using `useData` to fetch and parse the data, with axes styled via CSS.

VVidya Lakshmi Chitturi
94% match
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 populations of the top 30 countries, arranged from largest to smallest. The visualization uses React and D3 v5 to render scalable vector graphics (SVG) directly within a React component. Data is loaded from a CSV file via D3’s `csv` function, with population values parsed and formatted using `d3.format`. Axis components generate SVG line and text elements, while rectangle marks include native SVG tooltips to reveal precise population figures on hover.

SShiva Sai Reddy
94% match