Activity 6_Task1

GGangumalla Ruchitha Reddy

activity 6_Task 1

This interactive horizontal bar chart visualizes the populations of 30 countries for the year 2020, using data loaded from a CSV file hosted on GitHub. Built with React and D3 v5, the visualization renders as an SVG, with each bar’s length proportional to its population value. The code defines custom axis and marks components, leveraging D3’s `scaleBand`, `scaleLinear`, and `format` APIs to manage scales and tick formatting. Hovering over a bar reveals the population value via a tooltip, while the axes are styled with blue tick lines and gray labels.

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

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 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

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.

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

Mmeenam1106@gmail.com

Kkaringusathwika@gmail.com

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Activity 6_Task 1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, with each bar’s length representing population size and country names on the y-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and process data from a GitHub-hosted CSV. SVG rendering is driven by reusable React components for axes and marks, with axis labels and green bars styled via CSS. Tooltips appear on hover, showing the population value in a compact format (e.g., “1.2B”).

SSiva Kishore Reddy