Activity6_Q1.2

Activity6_Q1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses React with D3 v5 scales, including d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data is loaded via d3.csv from a GitHub repository and rendered as SVG rectangles with native tooltips showing formatted population values. Custom React components handle axis rendering with tick formatting that converts Giga units to Billions.

VVidya Lakshmi Chitturi

Activity-6-q1.2

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles, with React managing the component structure. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and population values are formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Blue axis lines and green bars are styled with CSS.

Bbhargavr016@gmail.com

Aabdul.khader2899@gmail.com

Activity-6_Question1.2

This horizontal bar chart visualizes the 2010 populations of the first 20 countries from a CSV file, sorted alphabetically by country name. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for the axes and renders SVG rectangles via the `Marks` component. Each bar’s length represents population, with tooltips showing formatted values (e.g., "1.37B"). The chart includes styled tick marks and axis labels, with population data multiplied by 1000 from the source.

Kkeerthana11.mcs@gmail.com

Activity 6_Q1.2

This bar chart displays the population of 20 countries in 2010, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population data is loaded via `d3.csv` from a GitHub-hosted CSV and rendered as SVG rectangles. Axis components and marks are built as separate ES6 modules, with tick labels formatted using `d3.format`.

Tthoutunikhitha@gmail.com

Activity-6_Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The bars are rendered as SVG rectangles using React components, with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` to abbreviate large numbers (e.g., "1.2B"), and each bar includes a tooltip showing the exact value.

Activity6q1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The chart uses React and D3 v5, with scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Population values are formatted using D3's `format` function, converting values like "G" (giga) to "B" (billion). The data is loaded asynchronously from a CSV file via d3.csv, and bars are rendered as SVG rectangles with native tooltips.

GGOPI MUPPURI

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.

Aadapasaidivya99@gmail.com

Activity_6_Q_2

A horizontal bar chart displays the 2010 population of 20 countries, with bars ranked by country name on the y-axis and population in billions on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and `csv` from D3 to load the dataset from a GitHub URL. Axis components generate ticks, while rectangle marks include tooltips via SVG `<title>` elements.