Activity-8_Task - 1

Activity6 Task1

This example displays a horizontal bar chart of 2020 population data for 30 countries, with bars colored light green and a blue axis line. It renders as a React application using D3 v5 to scale and format the population values (e.g., converting gigabytes to billions in tick labels). Data is loaded from a remote CSV file, and the chart is drawn using SVG rectangles. The code explicitly uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.csv` to process and visualize the dataset.

Ppslharika@gmail.com

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

activity 6_Task 1

This example displays a horizontal bar chart of the 2020 populations for 30 countries, using a green fill for each bar. The chart is rendered as an SVG via React, with D3 v5 handling the data loading through `csv` and the linear and band scales for the axes. Axis ticks are generated manually with custom components, and D3's `format` function converts large numbers into abbreviated labels like "B" for billions.

Vvemulasai306@gmail.com

Activity6_Task1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, using a light green fill and blue tick marks. Population values are formatted with SI prefixes, converting "G" to "B" for billions. The visualization is built with React and D3 v5, loading CSV data via `d3.csv` and rendering SVG bars using `scaleBand` and `scaleLinear`. The `AxisBottom` and `AxisLeft` components generate ticks, while `Marks` renders rectangles with tooltip titles.

VVarshith Peddineni

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.

Activity8_Task-1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, sorted alphabetically by country name. The chart uses a green fill for each bar and displays a tooltip with the population value formatted in a compact, human-readable scale (e.g., "1.2B") on hover. Rendered as an SVG via React, the visualization employs D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw axes and rectangles. Data is fetched asynchronously from a CSV file using D3’s `csv` loader, with the population converted from a string to a numeric value before being plotted.

HHarika Metta

SSaiKiranReddyKancharla@my.unt.edu

activity 6_Task 1

This example displays a horizontal bar chart of population figures for 30 countries in 2020, with axes and tick labels rendered in SVG via React components. It loads data from a remote CSV using D3’s `csv` function, scales the bars with `scaleBand` and `scaleLinear`, and formats tick values with `format('.2s')`. The bars use D3’s `max` for domain calculation and include tooltips via SVG `title` elements. The chart is styled with green marks and blue axis lines.