activity 6

Vvidyagangasani@my.unt.edu

Activity 6

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React components render the SVG elements. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers, for example converting Gigas to Billions. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Ssathvikavancha@my.unt.edu

Activity 6

This bar chart displays the population figures for 30 countries in 2020, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React to render SVG elements, with D3 v5 functions such as `scaleBand` and `scaleLinear` for scaling, and `csv` for loading data from a GitHub-hosted CSV file. Tooltips reveal precise values formatted using D3's `format` function, and the chart includes custom 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.

Mmanisahiths54321@gmail.com

Activity-6

This horizontal bar chart displays the populations of 30 countries for the year 2020, ordered along the y-axis. Built with React and D3 v5, it renders as an SVG, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, with data loaded from a CSV file. The bars’ widths encode population values, and a tooltip (via the SVG `<title>` element) shows the formatted value on hover.

Ppuppireddyarchana@gmail.com

Activity6

This bar chart displays the population of 30 countries for the year 2020, sorted along a horizontal axis using a linear scale. The vertical axis lists country names via a band scale. Data is loaded as CSV and formatted with d3’s `format` for tick labels (converting billions). The visualization uses React with d3.v5, rendering as SVG with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Each bar includes a tooltip showing the formatted population value.

SSathishvepuri143@gmail.com

activity-6-t-1

This chart displays the population of 30 countries in 2020 using a horizontal bar chart. The React-based visualization uses D3 modules like `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with formatted tick labels using `format.` Each bar is an SVG `rect` with a tooltip showing the population value. The data is loaded from a remote CSV file, and axes are rendered using the custom `AxisBottom` and `AxisLeft` components.

Bbhavithamanyam@gmail.com

Activity 6

This bar chart displays the population of 30 countries for the year 2020, sorted alphabetically along the y-axis with the population magnitude mapped to the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` via React components, rendering SVG rectangles that include tooltips showing the population value. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function and formatted with `d3.format`. The chart includes styled axes with blue tick lines and Poppins typography.

Aanushapodapati99@gmail.com

Activity 6

A horizontal bar chart displays the population of 30 countries in 2020, ordered by country name on the y-axis. A linear x-scale encodes population values, with formatted tick labels converting scientific notation to billions (e.g., “1.40B”). Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for axes, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Axis ticks are styled with blue lines, and tooltips show the formatted population value on hover.