Activity 6_Task 1

MMannava Priyanka Chowdary

Activity 6_Task 1

This horizontal bar chart visualizes the 2020 populations of 30 countries. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component draws rectangles whose widths correspond to population values, with tooltips formatted via D3’s `format` function. Axis tick labels are formatted with the `.2s` specifier to show values in billions, and data is loaded from a remote CSV using D3’s `csv` function within a custom `useData` hook.

MMannava Priyanka Chowdary

Activity 6_Task 1

This horizontal bar chart visualizes the 2020 populations of 30 countries. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component draws rectangles whose widths correspond to population values, with tooltips formatted via D3’s `format` function. Axis tick labels are formatted with the `.2s` specifier to show values in billions, and data is loaded from a remote CSV using D3’s `csv` function within a custom `useData` hook.

MMannava Priyanka Chowdary

Activity 6_Task 1

This horizontal bar chart visualizes the 2020 populations of 30 countries. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component draws rectangles whose widths correspond to population values, with tooltips formatted via D3’s `format` function. Axis tick labels are formatted with the `.2s` specifier to show values in billions, and data is loaded from a remote CSV using D3’s `csv` function within a custom `useData` hook.

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

AArunVurukonda@my.unt.edu

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted alphabetically along the vertical axis with horizontal bar lengths representing population values in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data loads asynchronously from a GitHub-hosted CSV using `d3.csv`, with axis ticks formatted using `d3.format` and a hover tooltip provided by SVG `<title>` elements.

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com

Activity 6_Task 1

A horizontal bar chart displays the 2020 population for 30 countries, ranked by country name along the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` for positioning, while SVG rectangles render the bars with a native `<title>` tooltip showing formatted values. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with axis ticks and labels generated by custom React components.

SSeema Shrestha