Fork of Activity-6 Q1.2

Aajaykumarseelam@my.unt.edu

Fork of Activity6_Question 1.2

This example displays a horizontal bar chart comparing the populations of 20 countries for the year 2010, using a bright green fill for the bars. The React application loads data from a remote CSV file via `d3.csv` and renders the visualization as an SVG. It uses D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. A tooltip showing the population in billions appears on hover, driven by the `<title>` element within each bar.

Fork of Activity 6_Question 1-1.2

A horizontal bar chart displays the top ten countries by 2020 population, with bars extending rightward from a blue axis line and a green fill. The visualization uses React to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) mapping country names and population values. Data loads asynchronously from a GitHub-hosted CSV file via `d3.csv`, and tick labels format large numbers using `d3.format` with a custom 'B' suffix replacement.

HHarshita Vairagade

Aaadesh.pranesh@gmail.com

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Fork of Activity_6_question-1.2

This example visualizes the 2020 populations of 20 countries as a horizontal bar chart, using SVG rectangles rendered through React components. It loads data from a GitHub-hosted CSV file via d3.csv, then maps each country’s population (converted from thousands) to bar widths using d3.scaleLinear, while d3.scaleBand positions the categorical y-axis labels. D3’s format method abbreviates large numbers, and custom AxisBottom and AxisLeft components generate styled ticks. The chart is built with React functional components and d3 v5, featuring green bars and blue tick lines.

AAbrarb702@gmail.com

SSathishvepuri143@gmail.com

Fork of activity-6-a1-2

This bar chart displays the populations of 20 countries for the year 2010, using data fetched from a CSV file via the d3.csv function. The visualization renders as an SVG with React, using d3 scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Thick green bars represent population values, and hovering reveals tooltips via SVG title elements. The axis labels and tick formatting are built with custom React components for the bottom and left axes.

Fork of Activity 6_Q1_2

This visualization shows a horizontal bar chart comparing the 2010 population of twenty countries, sourced from a CSV file hosted on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, rendering marks as SVG rectangles. Axes are customized via reusable components, and `d3.format` converts tick labels from billions to abbreviate them.

KKarnam Abinay Goud

Kkowshiksamudrala08@gmail.com

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Kkowshiksamudrala08@gmail.com

Fork of activity 6_ Q1.1

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale. Each bar’s length encodes population via a linear scale, with axis ticks formatted in billions and a labeled horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` from D3 for scales and `csv` to load data from a GitHub-hosted CSV. SVG rendering is handled through React components, with tooltips provided by native `<title>` elements.