Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Pperamranji
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart ranks 30 countries by total population in 2020, using green bars on a white background with blue axis ticks. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to map data from a CSV hosted on GitHub, rendered as SVG `<rect>` elements. D3’s `format` function converts population values to abbreviated labels, and native SVG `<title>` elements provide hover tooltips.

Pperamranji
94% match
Loading thumbnail…

Fork of Activity 7.2

This fork of Activity 7.2 renders a horizontal bar chart of the top 20 countries by population in 2020, with a green fill for each bar and a tooltip showing the formatted population value. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `svg` elements like `rect` and `text` for marks and labels. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and formatting uses `d3.format` to abbreviate large numbers.

BBhavanaGIrni
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 horizontal bar chart displays the top 30 countries by 2020 population, with green bars extending from a shared baseline and blue tick marks along the axes. Built with React, the visualization uses D3 v5’s `scaleBand`, `scaleLinear`, and `format` utilities to map country names and population values to SVG rectangles, while the `csv` loader fetches data from a GitHub-hosted CSV file. Axis components render tick lines and labels, and hover tooltips reveal formatted population values via SVG `<title>` elements.

Mmayasuedorman@gmail.com
94% match
Loading thumbnail…

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
94% match
Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with blue axis ticks, green bars, and formatted labels (using SI units where G becomes B). The React application uses D3 v5 utilities d3.scaleBand, d3.scaleLinear, and d3.csv to fetch and process data, rendering SVG marks via custom components. Tooltips reveal precise population values on hover, while the axes and labels use styling from the Poppins font.

Aasimcyb@gmail.com
93% 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 visualization shows the top 30 countries by 2020 population as a horizontal bar chart, with the x-axis formatted in billions using d3's `format` function. The chart uses React and d3.v5's `scaleBand` and `scaleLinear` to position bars, while `AxisBottom` and `AxisLeft` render tick marks. Data is loaded asynchronously via `useData` with d3's `csv` parser from a GitHub-hosted CSV file. SVG rectangles in `Marks` display the values, with native `<title>` elements providing hover tooltips.

Ddabbararakshitha@gmail.com
93% match