Acitivity_6_Task-1

Ssaisnehapalle@my.unt.edu

Activity6_Task 1

This example shows a horizontal bar chart of population data for 30 countries in 2020, with country names on the y-axis and population values on the x-axis. The chart renders as an SVG using React components for the axes and marks, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) to display tick labels in billions. Data is loaded asynchronously from a CSV file via `csv` and `useEffect`, and each bar includes a tooltip showing the formatted population value.

Ssaibharath7thota@gmail.com

activity6_task 1

This example shows a horizontal bar chart of population figures for 30 countries in 2020, with a green bar for each country and a blue axis grid. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to positions. The bar lengths encode the population data, which is loaded from a remote CSV via D3’s `csv` method, and a native SVG `<title>` element provides tooltips on hover. Axis labels are formatted using D3’s `format` helper to abbreviate large numbers.

Activity 6_Task_12

This example shows a horizontal bar chart of 2010 population figures for 30 countries, with a green fill on each bar and a tooltip displaying the abbreviated population value. The visualization loads a CSV from GitHub via `d3.csv`, maps the data through `useData`, and renders SVG bars using React components. Scales are built with `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis, while tick formatting uses `d3.format`.

TThai Ha Dang

Activity6_Task1

This example displays a horizontal bar chart comparing the 2020 population data for 30 countries, with bars sized by xScale and country names on the y-axis. It uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and d3.format for tick labels. The bars are light green rectangles with tooltips showing formatted population values, and the data is loaded from a CSV file via d3.csv.

VVidya Lakshmi Chitturi

Sshanmukhivasa@my.unt.edu

Activity6_Task1-2

This example shows a horizontal bar chart of population data for 20 countries in 2010, sorted by country name along the y-axis with population values on the x-axis. The visualization uses React components to render SVG elements, with D3 v5 scales (`scaleBand` and `scaleLinear`) and formatting utilities. The data is loaded via D3’s `csv` function from a remote gist, and each bar includes a native SVG `<title>` tooltip that displays the formatted population value. The axes are custom components that generate tick marks and labels, with formatting that converts large numbers to abbreviated units like “B” for billions.

Hhemanthdummy999@gmail.com

Activity 6_Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, with green bars and blue axis ticks on an SVG canvas. The React code loads D3 v5 via UNPKG and uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis. Data is fetched from a CSV file using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. The visualization demonstrates modular ES6 imports for axes and marks, with tooltips showing exact population values on hover.

Kkeerthanachinthalapally@gmail.com

activity 6_Task 1

This example shows a horizontal bar chart of population data for 20 countries in 2010, with countries listed along the y-axis and population values along the x-axis. The visualization uses React components to render SVG elements, with D3’s scaleBand and scaleLinear mapping data to positions and widths. The code imports csv from d3 to load the dataset from a GitHub gist, while AxisBottom and AxisLeft components generate tick marks and labels. Bars are drawn as SVG rectangles with a light green fill, and hovering reveals a tooltip with formatted population values.

Activity6_Task1

This example shows a horizontal bar chart of population data for 30 countries in 2020, with each bar labeled by country name and sized proportionally to its population value. The visualization is rendered as an SVG using React components, with D3’s `scaleBand` and `scaleLinear` handling the axis scales and D3’s `format` function converting tick labels to abbreviated units like “B” for billions. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the chart includes interactive tooltips via SVG `<title>` elements that display the formatted population on hover.

Rrahul.bonu524@gmail.com