Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
FFayezuddin Mohammed Khan
Last edited Nov 1, 2025
Created on Nov 1, 2025
Forked from Activity 7

This fork of Activity 7 shows a horizontal bar chart of 2020 population by country, with bars ordered by country name. The React component uses a D3 `csv` fetch to load the data (sliced to 30 entries) from a gist, and `scaleBand`/`scaleLinear` for positioning. The SVG rendering draws axes via custom `AxisBottom` and `AxisLeft` components, and `Marks` creates `<rect>` elements with `<title>` tooltips. Styling includes HTML/CSS for tick lines and fill colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file and rendered as SVG. React components build the visualization, using `scaleBand` and `scaleLinear` from D3 v5 to map country names and population values to positions and lengths. The `Marks` component draws rectangles with tooltips, while `AxisBottom` and `AxisLeft` generate ticks and labels.

Aakankshareddygorla@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of population data for 30 countries in 2020. The visualization uses React to render an SVG with D3.js scales and axes. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a GitHub repository. Each bar is a `<rect>` element with a `<title>` tooltip showing the population value, formatted using D3's `format` function to abbreviate large numbers.

Aanisha.peddireddy@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Rravularasesh3102@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 visualizes 2020 population data for up to thirty countries as a horizontal bar chart, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering everything as SVG elements. The data is loaded via `d3.csv` from a remote GitHub URL, and tooltips display formatted population values using `format('.2s')`. The chart employs a green fill for bars, blue axis lines, and custom tick labels that convert large numbers to billions.

LLohitha Konidena
93% match
Loading thumbnail…

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`.

Ssriharshakondakindi@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 displays a horizontal bar chart of the top 30 countries by 2020 population, using a diverging green color for the bars. It fetches data from a CSV file via `d3.csv`, then renders with React and SVG, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. `d3.format` provides tick labels, while custom React components define the axes and bar marks with `<title>` tooltips. The visualization highlights a clean, minimal style with Poppins font and styled grid lines.

Pperamranji
93% match
Loading thumbnail…

Fork of Activity 7 sample

This fork of Activity 7 shows a horizontal bar chart of 2020 population estimates for 30 countries, with bars colored green on an SVG rendered through React. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to abbreviate tick labels (e.g., “B” for billions). Data is loaded from a CSV file via d3.csv and transformed by multiplying the “2020” column by 1000. Axes and marks are built declaratively as React components, with a `<title>` element providing a native tooltip on each bar.

Kkrishi7079@gmail.com
93% match