Activity-6-Task1.2

Activity6_Task1

A bar chart displays the population of 20 countries in 2010, ranked along a vertical band scale. The React application loads CSV data from a GitHub URL via D3’s `csv` and uses `scaleBand` and `scaleLinear` to position bars, with axes rendered as SVG elements from custom `AxisBottom` and `AxisLeft` components. Native SVG `<title>` elements provide tooltips on hover, and ticks are formatted using `format('.2s')` to abbreviate large numbers.

AAftab Hussain

Activity 6

This horizontal bar chart ranks the 20 most populous countries in 2010, using a React and D3-based SVG visualization. The chart employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with population values formatted using `toLocaleString`. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then sorted and filtered to the top 20 entries. Each bar includes a native SVG `<title>` tooltip, with axes and labels rendered from custom React components.

Kkblikitha22@gmail.com

Rrajeswariamruthabommaraju@my.unt.edu

Activity 6_task 1_q1.2

A horizontal bar chart displays the 20 most populous countries in 2010, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to position bars, while custom React components render axes and marks as SVG rectangles. Data loads from a remote CSV file via `d3.csv`, with population values multiplied by 1000 and formatted using `d3.format`. Tooltips show exact population values through SVG `<title>` elements.

Ggsdontineni518@gmail.com

Activity6_task1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name along the y-axis. Each bar’s length encodes population value, with a formatted tick label converting SI units (e.g., "B" for billions) for readability. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, then sliced to the first 20 rows.

SSaiKiranReddyKancharla@my.unt.edu

Activity-6-Task1.1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, with a title on the x-axis. The bars are rendered as SVG rectangles using React components and D3’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is loaded from a remote CSV file via `d3.csv`, formatted with `format('.2s')`, and the chart includes native SVG tooltips. Axis labels and tick styling are customized through React components like `AxisBottom` and `AxisLeft`.

Ppadiginetivishnupriya@gmail.com

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of the top 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The data is loaded as CSV via `d3.csv` from a GitHub repository. React renders the SVG, while D3 v5 scales (`scaleBand` and `scaleLinear`), axes, and tick formatting (`format('.2s')`) handle the layout. Tooltips appear on hover using native SVG `<title>` elements.

Activity 6 task 1.1

This example displays a horizontal bar chart of the top 20 countries by population in 2010, read from a remote CSV file via d3.csv. The React app maps the data to SVG rectangles using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, with axes built from d3.scaleBand.ticks and tick formatting via d3.format('.2s'). Hovering reveals the population value in a tooltip through the SVG `<title>` element.

Rrohitpotluri@my.unt.edu

SSaiKiranReddyKancharla@my.unt.edu

Activity6_Task1

This bar chart displays the top 30 countries by 2020 population, using horizontal bars ordered by country name. The visualization loads data from a CSV file via `d3.csv`, scales it with `scaleBand` and `scaleLinear`, and renders SVG rectangles through React components. D3’s `format` function converts population values to abbreviated labels like “1.2B”. Axes are built with custom `AxisBottom` and `AxisLeft` components that use D3’s tick methods, while a native SVG `<title>` element provides hover tooltips.