Hafsa Hayath

@hafsahayath·2 public vizzes

Activity_6_test2

This example shows a horizontal bar chart ranking the populations of 20 countries in 2010, with data loaded from a remote CSV and rendered as an SVG using React and D3 v5. It uses `d3.csv` to fetch and parse the dataset, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. Custom React components draw the axes and marks, with green bars whose widths encode population values and tooltips showing formatted numbers via `d3.format`.

Apr 14, 2024

Loading thumbnail…

Activity_6_test

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, using a dataset loaded from a GitHub-hosted CSV file. The visualization is rendered as an SVG in a React application, with D3 v5 providing the scales and formatting: `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the population values, and `d3.format` to abbreviate tick labels from millions to billions. The code imports separate React components for the axes and bars, and includes interactive tooltips via SVG `<title>` elements.

Apr 14, 2024