Fork of Activity 7

Fork of Fork of Activity 7

This visualization displays a horizontal bar chart of the top 20 countries by population in 2010, using data loaded from a CSV file via d3.csv. The React app renders SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, formatting tick labels with d3.format. Axes are custom components, and each bar includes a native SVG tooltip showing the population value using the same formatted scale.

Ggoudrohit2000@gmail.com

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com

Fork of Fork of Activity7question1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, using a D3 v5 scaleBand for countries and a scaleLinear for population. The React-based rendering utilizes SVG, with `AxisBottom` and `AxisLeft` components generating ticks, while `Marks` creates rectangles whose widths encode population values. A tooltip, defined via `<title>`, shows the abbreviated population figure. Data is loaded asynchronously from a remote CSV file using D3's `csv` function.

Vvaishnavi6gan@gmail.com

Fork of Fork of Activity7question1

Vvaishnavi6gan@gmail.com

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav

Ssriharshakondakindi@gmail.com

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of 30 countries in the year 2000, sorted by country name on the y-axis. The chart uses React components to render SVG rectangles via `Marks.js`, with `scaleBand` and `scaleLinear` from D3 v5 handling the axes. Data is loaded asynchronously from a CSV file using `d3.csv` inside a custom `useData` hook, and each bar includes a native SVG `<title>` element for tooltips. The axes are built with reusable `AxisBottom` and `AxisLeft` components, and tick labels are formatted with `d3.format`.

Fork of Activity 7

A horizontal bar chart ranks ten countries by their 2000 population, using React to render SVG elements. D3 v5 functions (`scaleBand`, `scaleLinear`, `max`, `format`) drive the scales and tick formatting. The chart loads CSV data via `d3.csv` from a GitHub repository, slicing to the top ten rows. Axis components and rectangle marks are built with JSX, with `<title>` elements providing native tooltips.

Ssathvik0311@gmail.com

Vvarun.mahankali39@gmail.com

Fork of Activity 7

A horizontal bar chart displays the 2010 population of the top 20 countries, sorted by value. Built with React and D3 v5 (scaleBand, scaleLinear, csv, max, format), it renders marks as SVG rectangles. The chart loads data from a GitHub-hosted CSV file, with axes using custom components and a tooltip formatted with the `.2s` SI prefix.