Activity 6

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

Ssathvikavancha@my.unt.edu

Activity 6

This bar chart displays the population figures for 30 countries in 2020, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React to render SVG elements, with D3 v5 functions such as `scaleBand` and `scaleLinear` for scaling, and `csv` for loading data from a GitHub-hosted CSV file. Tooltips reveal precise values formatted using D3's `format` function, and the chart includes custom axis components.

Jjasthilavanya2022@gmail.com

Activity 6

This visualization displays the population of 30 countries in 2020 using horizontal bar charts rendered as SVG rectangles. The bars are sorted by country name along the y-axis, with x-axis lengths scaled proportionally to population values, formatted in billions. Built with React and D3 v5, the implementation uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load data from a GitHub-hosted dataset. Tooltips show formatted population values via SVG `<title>` elements.

Bbhavithamanyam@gmail.com

Activity 6

This bar chart displays the population of 30 countries for the year 2020, sorted alphabetically along the y-axis with the population magnitude mapped to the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` via React components, rendering SVG rectangles that include tooltips showing the population value. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function and formatted with `d3.format`. The chart includes styled axes with blue tick lines and Poppins typography.

Activity 6

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name, with each bar’s length representing population in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` marks with tooltips via `<title>`. Data is loaded from a remote CSV using `d3.csv`, and axes are rendered by custom components (`AxisBottom`, `AxisLeft`) with tick formatting via `d3.format`.

Gganesh.hns48@gmail.com

Vvandanakosuri@my.unt.edu

Activity-6(Task1)

This bar chart displays the population of 30 countries in 2020, using horizontal bars that encode population values by length. The visualization is built with React and D3 v5, leveraging D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rendering for crisp output. The chart includes custom tick formatting that converts scientific notation to readable numbers, and tooltips show exact population values. Data is loaded from a remote CSV file using D3’s `csv` parser.

Ppravallikachowdary16518@gmail.com

Activity 6

This bar chart visualizes the 2020 population of 30 countries using a horizontal layout, with each bar’s length proportional to its population value. The visualization is built with the React framework, using D3 v5 utilities like `scaleBand` and `scaleLinear` for axes and layout, while rendering to SVG. Country names appear on the left axis, and a formatted tick label converts values to billions. Data is loaded from a remote CSV via `d3.csv`, and tooltips detail each bar’s exact population figure.

Eeragarlaveena122@gmail.com

Activity 6

A horizontal bar chart displays the population of 30 countries for 2020, using the D3 library in a React component. The chart employs D3 scaleBand for the y-axis and scaleLinear for the x-axis, with tick labels formatted using D3's format function to abbreviate large numbers. Data is loaded via CSV, and SVG rectangles are rendered for each bar, with tooltips showing the exact population value.