activity 6_Task 1

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

activity 6_Task 1

This bar chart displays the 2020 population of 30 countries, ranked vertically with horizontal bars extending to represent population size. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric population axis, with a zero baseline. The data is loaded from a CSV file and formatted using `d3.format` to abbreviate large numbers. SVG rectangles render the bars, with tooltips showing exact population values on hover.

YYeruva Snehith Reddy

Activity 6_Task 1

This interactive bar chart displays the 2020 population figures for 30 countries, using horizontal bars to rank each nation along a linear scale. The visualization employs React to manage the SVG rendering, with D3 v5 handling data loading, scales, and axis generation through functions like `scaleBand` and `scaleLinear`. Population data is fetched from a CSV file and formatted using D3's `format` utility, converting values to billions for tooltips. The chart features blue tick lines, green bars, and a Poppins font, with the y-axis listing country names and the x-axis labeled “POPULATION-2020.”

Hharsha13638@gmail.com

Kkeerthana11.mcs@gmail.com

Activity 6_Task 1

This bar chart ranks 30 countries by their 2020 population, using a horizontal layout with the country names on the y-axis and population values on the x-axis. The SVG is rendered with React, using D3’s `scaleBand` and `scaleLinear` for axes, and `format` for tick labels that abbreviate large numbers (e.g., “1.2B”). Data is loaded from a remote CSV via `d3.csv`, and each bar’s tooltip displays the exact abbreviated population value. The axes and marks are built with custom ES6 modules for bottom ticks and left labels, with the chart styled by CSS classes.

Ssaiteja.cse.rymec@gmail.com

activity 6_Task 1

This bar chart visualizes the 2020 population of 30 countries, using a horizontal layout with bars scaled by population. The visualization is built with React and D3 v5, leveraging `d3.scaleBand` and `d3.scaleLinear` for axes and `d3.format` for tick labels (e.g., converting "G" to "B"). Data is loaded from a CSV URL via `d3.csv` and rendered as SVG rectangles with tooltips. A Poppins font and CSS styles control the visual presentation.

Kkaringusathwika@gmail.com

activity 6_Task 1

This bar chart displays the population of 30 countries for the year 2020, ranked along the vertical axis. The chart uses a green horizontal bar for each country, with a tooltip showing the precise population value on hover. It loads data from a CSV file via D3's `csv` function, and constructs a band scale and linear scale for the axes. The React components render SVG elements for the axes and marks, while D3's `format` function converts large numbers into abbreviated strings.

Ssriharshakondakindi@gmail.com

activity 6_Task 1

This interactive bar chart displays the 2020 populations of the top 30 countries, with each country’s value encoded as a horizontal bar’s length. Built with React and SVG, the visualization uses D3 v5 scales (`scaleBand` for the categorical axis, `scaleLinear` for the numeric axis) and `format` to abbreviate population labels (e.g., “B” for billions). Data is loaded asynchronously from a CSV via D3’s `csv` and parsed into numeric population values, with marks rendered as colored rectangles.

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React components to render SVG elements, with D3’s scaleBand and scaleLinear handling the spatial mapping and d3.csv loading population data from a GitHub-hosted CSV file. Axis components generate tick marks and labels, while a formatter converts large numbers into abbreviated values like “1.2B” for readability.

Vvikramkotlo9@gmail.com