Activity 6_Task 1

Activity6_Task 1

This bar chart displays the top 30 countries by 2020 population, ranked along a vertical band scale. The visualization uses D3 v5 for data loading and scale creation, with React components rendering SVG rectangles for each bar. The code applies `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, formatting tick labels with `d3.format`. Data is fetched as CSV from a GitHub repository, with values multiplied by 1000 to represent actual population figures.

UUday Vandanapu

Mmaheshsachin1234@gmail.com

activity 6_Task 1

A horizontal bar chart displays population figures for the top 30 countries in 2020, using a linear scale for population and a band scale for country names. The visualization, built with React and D3 v5, renders SVG rectangles whose lengths encode population values, with axes and tick labels generated by custom components. Data is loaded from a CSV file via D3's `csv` function, and the axis formatting converts large numbers to abbreviated labels.

Activity 6_Task 1

This bar chart displays the top 30 countries by population in 2020, using the D3 v5 library within a React framework. The visualization uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles with tooltips. Data is loaded via `d3.csv` from a GitHub repository, and axes are formatted with `d3.format`. The chart includes custom React components for axes and marks, with population values multiplied by 1,000 for display.

MMonish Galla

Aanusha.chilkamarri26@gmail.com

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.

Activity6_Task1

This visualization shows the top 30 countries by population in 2020 as a horizontal bar chart, with population values formatted in billions and a labeled x-axis. The chart uses D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, while bars are drawn as SVG rectangles. React components structure the visualization, with `AxisBottom` and `AxisLeft` rendering ticks, and tooltips display each bar's value via an SVG `<title>` element. Data is loaded from a remote CSV file.

LLayaMyadam@my.unt.edu

activity 6_Task 1

This horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order. The visualization uses a linear x-scale for population values and a band y-scale for country names, with teal bars rendered as SVG rectangles in a React component. Data is loaded via `d3.csvParse` from a GitHub gist, with axis ticks formatted in millions. The code demonstrates React state management with `useState` and `useEffect` hooks alongside D3’s `scaleLinear` and `scaleBand` APIs.

SSrihith Reddy Gaddam

Ssahithya.voleti@gmail.com

Activity 6_Task1

This bar chart displays the population of the top 30 countries in 2020, sorted by country name along the y-axis and population along the x-axis. The visualization uses D3.js v5 scale functions with React components for each chart element, including custom axes for tick marks and labels. Population values are formatted with a compact notation that converts billions (G) to billions (B) for tick labels and tooltips. The data is loaded as a CSV file from a GitHub gist, and the chart renders as an SVG with CSS styling for tick lines and bar fills.

Kkowshiksamudrala08@gmail.com

activity 6_Task 1

This bar chart displays the top 30 countries by 2020 population, using horizontal bars to compare values against a linear scale. The visualization sorts countries vertically with a band scale, formats tick labels using D3’s `format` function to abbreviate numbers, and renders axes and marks as SVG elements within a React component. Data loads asynchronously via `d3.csv` from a remote GitHub repository, with tooltips showing formatted population values on hover.