Activity6_Task1

LLakshmiDeepikaPagadala@my.unt.edu

Activity6_Task1

This bar chart visualizes the 2020 population estimates for the top 30 countries, sorted by country name. The horizontal bars are rendered as SVG rectangles using React, with the D3 library's `scaleBand` and `scaleLinear` functions handling the axis mappings. Data is loaded from a remote CSV file via the `d3.csv` function, and axis ticks and labels are generated with custom React components. The chart includes a fixed color scheme and a tooltip that displays the formatted population value.

Activity 6_Task 1

This interactive bar chart displays the population figures for 30 countries in 2020, with country names on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the data, rendering SVG rectangles via the `Marks` component. The chart features custom tick marks and labels, with population values formatted using `d3.format(‘.2s’)` and converted to billions. The data is loaded from an external CSV file using D3’s `csv` function, and tooltips show the precise population on hover.

Rreddyjathin95@gmail.com

Activity6_Task1

This visualization shows the top 30 countries by population in 2020 using a horizontal bar chart built with React and D3 v5. Each bar’s length encodes population via a linear scale (`d3.scaleLinear`), while countries are positioned along a band scale (`d3.scaleBand`). The code fetches CSV data from a GitHub repository, formats population values, and renders SVG rectangles with tooltips. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks, with axis tick formatting converting values to billions using `d3.format`.

Ggnanendra097@gmail.com

Ssahithya.voleti@gmail.com

Activity 6_Task1

This bar chart displays the population of the top 30 countries in 2020, sorted by country name along the y-axis and population along the x-axis. The visualization uses D3.js v5 scale functions with React components for each chart element, including custom axes for tick marks and labels. Population values are formatted with a compact notation that converts billions (G) to billions (B) for tick labels and tooltips. The data is loaded as a CSV file from a GitHub gist, and the chart renders as an SVG with CSS styling for tick lines and bar fills.

Activity 6_Task

This interactive bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name along the y-axis and population size on the x-axis using a linear scale. Built with React and rendered as an SVG, the visualization uses D3 v5 APIs such as `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The code fetches CSV data from an external GitHub URL, formats population values with the `format` function (converting billions to “B”), and provides hover tooltips via SVG `<title>` elements. The styling includes green bars, blue tick lines, and the Poppins font.

VVasanth Krishna

SShashankkodishala@my.unt.edu

Activity6_Task1

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file, with countries on the y-axis and population on the x-axis. The visualization uses React components to render SVG marks, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format for abbreviating tick labels (e.g., "B" for billions). The code leverages d3.csv for data loading and includes tooltips via SVG `<title>` elements.

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.

Activity 6_Task 1

This bar chart displays the top 30 countries by population in 2020, using the D3 v5 library within a React framework. The visualization uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles with tooltips. Data is loaded via `d3.csv` from a GitHub repository, and axes are formatted with `d3.format`. The chart includes custom React components for axes and marks, with population values multiplied by 1,000 for display.

MMonish Galla