Activity6

Activity6_Task 1

This bar chart displays the top 30 countries by 2020 population, ranked along a vertical band scale. The visualization uses D3 v5 for data loading and scale creation, with React components rendering SVG rectangles for each bar. The code applies `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, formatting tick labels with `d3.format`. Data is fetched as CSV from a GitHub repository, with values multiplied by 1000 to represent actual population figures.

UUday Vandanapu

Activity 6

This example shows the 2020 population for 30 countries as a horizontal bar chart built with React and D3 v5, rendered as SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format('.2s')` to abbreviate tick labels (e.g., converting G to B). Data is loaded asynchronously from a remote CSV via D3’s `csv` method, with the axis and marks defined as reusable React components.

NNithish Karanam

Ssanavenkatasurendrareddy@gmail.com

Activity-7

This visualization displays a horizontal bar chart ranking the top 30 countries by 2020 population, using a React component that renders SVG elements. The chart maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale, formatting tick labels in billions using d3.format. Data is loaded asynchronously from a remote CSV via d3.csv, and the bars are drawn as rect elements with native SVG tooltips showing formatted population values. The example demonstrates integrating React with D3 v5 scales and axis components.

Jjasthilavanya2022@gmail.com

Activity 6

This visualization displays the population of 30 countries in 2020 using horizontal bar charts rendered as SVG rectangles. The bars are sorted by country name along the y-axis, with x-axis lengths scaled proportionally to population values, formatted in billions. Built with React and D3 v5, the implementation uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load data from a GitHub-hosted dataset. Tooltips show formatted population values via SVG `<title>` elements.

Aajaykumarseelam@my.unt.edu

Activity 6

This bar chart displays the top 30 countries by population in 2020, using horizontal bars with country names on the y-axis and population values on the x-axis. The visualization demonstrates React with D3 v5, employing `d3.csv`, `scaleBand`, `scaleLinear`, and `max` for data processing and scaling. SVG rendering creates the bars and axes through custom React components, with tooltips showing formatted population values and an axis label reading "POPULATION-2020."

activity 6_Task 1

This horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order. The visualization uses a linear x-scale for population values and a band y-scale for country names, with teal bars rendered as SVG rectangles in a React component. Data is loaded via `d3.csvParse` from a GitHub gist, with axis ticks formatted in millions. The code demonstrates React state management with `useState` and `useEffect` hooks alongside D3’s `scaleLinear` and `scaleBand` APIs.

SSrihith Reddy Gaddam

Activity 6_Task 1

This bar chart displays 2020 population estimates for 30 countries, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v6, employing `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles via the `Marks` component. The data is loaded asynchronously from a CSV file using the `csv` function, with population values multiplied by 1000 and formatted using `format('.2s')` to show values in billions. Native SVG `<title>` elements provide tooltips on hover.

NNithish Karanam

Hharinihari6791@gmail.com

Activity6_Task 1

This bar chart displays the top 30 countries by population in 2020, using horizontal bars sorted by country name. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis) managing coordinate mapping. Population values are loaded from a CSV file and formatted with a custom tooltip using D3's format function. The chart includes styled axes, hover effects, and a maximum domain slightly exceeding the largest population value.