Activity_6_task1.1

Mmeghna.reddy700@gmail.com

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of twenty countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered as marks. Data is loaded from a CSV file using `d3.csv` and formatted with D3's `format` function to display values in billions. Axis components handle tick generation and titles, while hover tooltips reveal precise population figures.

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.

activity 6_Task 1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000. The bars are rendered as SVG rectangles, with the x-axis using a linear scale for population values and the y-axis using a band scale for country names. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the marks, and custom `AxisBottom` and `AxisLeft` components to draw the axes and tick labels. Data is loaded from a remote CSV file using D3’s `csv` function, and the population values are formatted using D3’s `format` with a `.2s` abbreviation that converts gigabytes to billions.

MMallikarjun Narra

activity6_task1.2

This example shows a horizontal bar chart of 2010 population data for 20 countries, with country names on the y-axis and population scaled along the x-axis. The visualization is rendered as an SVG using React components and D3 v5 scales, including `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis. Data is loaded from a remote CSV file using the `csv` function from D3, with population values multiplied by one thousand. Axes, tick lines, and bar marks are built from custom React components, with title tooltips formatting population values using D3’s `format` function.

CCodeNinja

Activity6_Task1

This example displays a horizontal bar chart comparing 2020 population figures for 30 countries. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded asynchronously from a CSV file via d3.csv, and population values are formatted using d3.format with a custom tick formatter that converts gigabytes to billions. The chart includes axes generated through custom React components and interactive tooltips using SVG title elements.

KKhushi Desai

Hhemanthmaddila13@gmail.com

activity 6_Task 1

This example shows a horizontal bar chart of population data for 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded asynchronously from a CSV file via `d3.csv`, and each bar includes a native `<title>` element for tooltip display. Axis ticks and labels are generated through custom React components, with numbers formatted using `d3.format`.

Bbrahmateja.edu2023@gmail.com

activity 6_task 1

This example shows a horizontal bar chart of population data for 20 countries in 2010, with each bar labeled by country name and sized by population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning, and `format` to abbreviate axis tick labels (converting "G" to "B" for billions). Data loads from a remote CSV file via `d3.csv` in a custom `useData` hook. The code also defines reusable axis and mark components, and includes tooltips on each bar using SVG `<title>` elements.

Ssaitejauppu0206@gmail.com

activity_8task1

This example shows a horizontal bar chart comparing the populations of ten countries for the year 2000, with country names on the y-axis and population totals on the x-axis. Built with React and D3 v5, it loads CSV data via `d3.csv`, scales values using `scaleBand` and `scaleLinear`, and renders bars as SVG rectangles. Axis components use `d3.format` to abbreviate tick labels, converting values like "1.2G" into "1.2B". The data comes from a GitHub-hosted CSV file, and tooltips appear via SVG `<title>` elements.