Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
Ddabbararakshitha@gmail.com
Last edited Apr 4, 2025
Created on Apr 4, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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 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 6

This bar chart displays the 2020 populations of the top 30 countries, ranked vertically. Population values are formatted in billions using D3's `format` function, with a custom tick label replacing 'G' with 'B'. The visualization loads CSV data via `d3.csv` from a GitHub repository and renders SVG elements from React components. Axes and marks are built using D3's `scaleBand` and `scaleLinear`, with tooltips provided by SVG `<title>` elements.

Aajaykumarseelam@my.unt.edu
93% match
Loading thumbnail…

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.

Llikhithakarunakarreddym@gmail.com
93% match
Loading thumbnail…

Fork of Activity 7

This example shows the population of the top 20 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It is rendered as SVG in a React application using D3 v5 scales such as `scaleBand` and `scaleLinear`, with data loaded from a CSV file via D3’s `csv` function. The bars are colored light green, and the x-axis labels use D3’s `format` to abbreviate values into billions.

Iindushashi.g@gmail.com
93% match
Loading thumbnail…

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.

Vvarun.mahankali39@gmail.com
93% match
Loading thumbnail…

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
93% 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
92% match