Fork of Activity 8 Task 1 Q1.2

Fork of Fork of Activity_6_Task_1_Question_1_2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. Rendered as an SVG using React, the visualization loads data from a GitHub-hosted CSV file via the D3 `csv` function. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with axes and rectangular marks built from custom React components. Population values are formatted with D3’s `format` function to abbreviate large numbers, and tooltips on each bar show the precise formatted value.

LLarry Johnson

Aaadesh.pranesh@gmail.com

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Vvchittimadha@gmail.com

Aabdul.khader2899@gmail.com

Fork of Activity-6_Question1.2

This horizontal bar chart displays the population of the first 20 countries in 2010, with countries listed on the y-axis and population values on the x-axis. The visualization uses React with D3 v5 to load data from a CSV file, and renders the bars as SVG rectangles. The code uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and a custom d3.format('.2s') to abbreviate population values, while tooltips show the exact formatted values.

Fork of Activity 6_Question1_task2

This visualization shows a horizontal bar chart comparing the populations of 20 countries in 2010. Each bar’s length corresponds to the population value, with a blue axis line and tick marks, green bars, and a labeled x-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while the `csv` function loads data from a remote GitHub URL. Tooltips display formatted population values via the `format` function.

Jjampani921@gmail.com

Activity 8 - Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The visualization uses React with SVG rendering and D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously via D3's `csv` parser from a GitHub-hosted CSV file. Custom React components render the axes and rectangular marks, with formatted tick labels converting billions using D3's `format` function.

SSamir Tarda

Aanusha.chilkamarri26@gmail.com

Fork of Activity 6_Question1b

This bar chart displays the population of 20 countries in 2010, ordered along the vertical axis with horizontal bars extending to represent each country’s population. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars rendered as SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are formatted with `d3.format` to abbreviate large numbers (e.g., converting billions).

Activity 8 Task 1

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while custom `AxisBottom` and `AxisLeft` components render SVG axis ticks and labels. Population values are loaded from a remote CSV file and formatted using D3's `format` function, with tooltips provided by SVG `<title>` elements. The chart highlights the green bars and blue axis ticks against a clean background.

WWilliam Nsambu