Activity 6_Task 1 Question 2

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

Tthoutunikhitha@gmail.com

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.

Kkoushikkumarreddykoorapati@my.unt.edu

Activity 6_Task 1

A horizontal bar chart shows the 2020 population of 30 countries, sorted from largest at the top to smallest at the bottom. The visualization uses React components with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering marks as SVG rectangles. Data is loaded via d3.csv from a GitHub-hosted dataset, with population values formatted using d3.format. The chart includes labeled axes and a tooltip showing the exact population value for each bar on hover.

Activity6_Question1.2

This bar chart displays the population of 20 countries for the year 2010, ranked from largest to smallest along a horizontal axis. The visualization uses React with D3 v5 to render SVG elements, leveraging `d3.csv` for data loading from a GitHub repository and `d3.scaleBand` and `d3.scaleLinear` for positioning. Tick marks are styled in blue, with bars filled in light green. A tooltip appears on hover via the SVG `<title>` element, and the axis label is formatted using `d3.format`.

Ggnanendra097@gmail.com

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

activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, ranked vertically by name with horizontal bars indicating population size. A green fill and SVG rendering make the ranking immediately readable. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, while `csv` loads data from a GitHub-hosted CSV file. Axes are custom components, and tooltips appear via SVG `<title>` elements.

Bbhargavr016@gmail.com

Activity6_Task1

A horizontal bar chart displays the 2020 population of 30 countries, ranked from largest to smallest. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) positioning bars and axes. Population values are formatted with D3's Si-prefix format, converting billions to "B" notation. Data loads from a remote CSV file via d3.csv, and tooltips reveal precise population values for each bar.

Mmohanalaharic@gmail.com

Activity 6_Task 1

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

SSahithi.R