Fork of Activity 6

Fork of Activity 7

This chart displays the 2020 population of 30 countries as a horizontal bar chart, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The bars are drawn as `rect` elements with tooltips, while axis ticks are styled—bottom ticks blue and labels gray—via `AxisBottom` and `AxisLeft` components, with tick formatting using D3's `format('.2s')` to abbreviate large numbers.

Aabjalshaik02@gmail.com

Fork of Activity 6

A horizontal bar chart displays the 2020 population of 30 countries, ranked in descending order from the dataset loaded via `d3.csv` from a GitHub-hosted CSV file. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders bars as SVG `<rect>` elements. Custom `AxisBottom` and `AxisLeft` components generate ticks, while a `<title>` element provides tooltips with formatted values like "30M". The React app manages data loading asynchronously with a `useEffect` hook.

Ssathvik0311@gmail.com

LLakshmiPrasannaValdas@my.unt.edu

Fork of Activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a horizontal linear scale with countries listed on a vertical band scale. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to compute dimensions, while custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels. Population values are formatted with `format('.2s')` and converted from thousands, and each rectangle includes a native SVG `<title>` tooltip. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL.

Vvidyagangasani@my.unt.edu

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

Llikhithakarunakarreddym@gmail.com

Fork of Activity 7

This chart displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to positions, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are loaded from a CSV file and formatted with D3’s `format` function, converting billions to a readable "B" suffix. The chart includes a labeled x-axis and blue tick lines, with a green fill for each 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.

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam

Fork of Activity 7

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file fetched via `d3.csv`. The visualization uses D3 scales (`scaleBand`, `scaleLinear`) and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to render the SVG. Horizontal bars are drawn as `<rect>` elements, with tooltip text showing formatted values using D3’s `format` function. The chart includes styled gridlines, axis labels, and a "POPULATION-2020" title, all rendered through React’s declarative component structure.

Pperamranji