Activity 6 Question 1.2

Activity 6 Question 1.2

This visualization presents a horizontal bar chart ranking the populations of 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The bars are rendered as blue SVG rectangles using React components, while D3’s `scaleBand` and `scaleLinear` handle the positions and scaling. Data is loaded asynchronously from a CSV file via `d3.csv`. Axis ticks and labels are generated through custom React components, and hovering over a bar reveals its exact population value via the SVG `<title>` element.

Aabjalshaik02@gmail.com

Activity 6 Question 1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name. The visualization uses D3 v5 scales and SVG rendering within a React framework to map population values to bar lengths. The code employs `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load remote data. Population values are formatted using `siFormatter` to abbreviate large numbers (e.g., converting billions to "B").

BBharath Vupputuri

Activity 6 question 1_2

This bar chart displays the population of 20 countries in 2010, using horizontal bars ordered by country name. The visualization loads CSV data from GitHub via `d3.csv` and renders as an SVG using React components (AxisBottom, AxisLeft, Marks) with scales from `d3.scaleBand` and `d3.scaleLinear`. The x-axis uses `d3.format` to abbreviate population values (e.g., converting gigabytes to billions). Hovering over each bar reveals the exact population through an SVG `<title>` tooltip.

AAamani Chamarthi

Bbhargavireddy4016@gmail.com

Activity-6 question1.2

A horizontal bar chart displays the 2010 population for 20 countries, with each bar length proportional to population. The visualization uses React components (Marks, AxisBottom, AxisLeft) to render SVG rectangles, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data loads via d3.csv from a GitHub-hosted CSV file, and the bars include native SVG tooltips showing formatted population values using d3.format.

Activity 6 Question 1.2

This horizontal bar chart displays the population of twenty countries in 2010, sorted by country name. The visualization uses React with D3.js v5 for scaling and axis generation, rendering SVG elements. Data is loaded from a remote CSV file using D3's `csv` function. The chart employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with formatted tick labels showing values in billions.

Ssagipavan2385@gmail.com

Activity 6 Question 1.2

This example displays a horizontal bar chart of 2010 population data for 20 countries, with bars sorted by country name along the y-axis and population values on the x-axis. Using React with D3 v5, it loads CSV data via `d3.csv`, scales the population with `scaleLinear`, and positions bars with `scaleBand`. Tooltips appear on hover via SVG `<title>` elements, while custom `AxisBottom` and `AxisLeft` components render ticks, and axis labels are formatted with `d3.format`.

Kkesava

Activity6-Question-1.2

This bar chart displays the population of 20 countries in 2010, with horizontal bars sorted alphabetically by country name and scaled linearly by population. The visualization uses React alongside D3 v5’s `scaleBand`, `scaleLinear`, and `csv` for data loading, rendering SVG rectangles through the custom `Marks` component. Axes are generated by `AxisBottom` and `AxisLeft`, with formatted tick labels using `format('.2s')` and a tooltip via `<title>`. Tick lines are styled blue and bars green, with data sourced from a remote CSV file.

LLayaMyadam@my.unt.edu

Ttallapanenisahithi@gmail.com

Activity6-question 1.2

This horizontal bar chart displays the population of 20 countries in 2010. The visualization sorts countries along the y-axis using a band scale, with bar lengths proportional to population values on a linear x-axis. Built with React and D3 v5, the example loads CSV data and renders an SVG using local ES6 modules for axes and marks. Custom tick formatting converts large numbers to abbreviated “B” notation for billions, and tooltips show formatted values on hover.