Activity6_Task1

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

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

Ssirichandana017@gmail.com

Activity8_task1

A horizontal bar chart displays the top 30 countries by 2020 population, with bars sorted by country name and lengths proportionally scaled to population values. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) mapping data to positions. CSV data loads from a GitHub repository and processes the 2020 column by multiplying by 1000. The chart includes axis components with formatted tick labels converting G to B for billions, plus a light green bar fill and tooltips showing exact values.

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

VVrushikaKanaparthy@my.unt.edu

Activity6_task1

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. SVG rectangles render the bars, with tooltips showing formatted values via `format('.2s')`. The chart includes custom `AxisBottom` and `AxisLeft` components for ticks and labels.

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.

Vvenkatamanikantavaddi@my.unt.edu

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file via `d3.csv`, and each bar’s value is formatted using D3’s `format` function, with tooltips showing the abbreviated population.

Kkrishnavisheshkatta@my.unt.edu

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.