Skip to main content
SimilarExport ZIP
100%

Activity 7

✓ Published0🌍 Public
Mmn0658
Last edited Jun 28, 2023
Created on Jun 28, 2023
Forked from Hello VizHub

This example displays the 2020 populations of 20 countries as a horizontal bar chart, ordered by country name. The visualization uses React with D3's `scaleBand` and `scaleLinear` to position bars and axes, rendering to SVG. Population values are formatted with D3's `format('.2s')`, converting G to B for billions. Data is loaded asynchronously from a CSV file via `d3.csv`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7

This bar chart displays population figures for 20 countries in 2020, using horizontal bars sorted by country name. The visualization loads CSV data from a GitHub gist, parses the population values, and renders SVG rectangles scaled by a d3.scaleLinear x-axis with a d3.scaleBand y-axis. Custom React components for axes and marks handle ticks and tooltips, while formatting converts raw values to billions using d3.format.

Ssaikrishnabussa
93% match
Loading thumbnail…

Activity6_population

This example shows a horizontal bar chart of the populations of 20 countries in 2010, ordered by country name. The chart uses D3’s `scaleBand` and `scaleLinear` to map countries and population values to SVG rectangles, with axes built from custom React components. Population values are formatted with D3’s `format` function, converting values like “1.2G” to “1.2B”. The data is loaded asynchronously from a CSV file via `d3.csv`, and the rendering is done through React with SVG, using a light green fill for the bars and tooltips provided by SVG `<title>` elements.

Sskykarthik97@gmail.com
93% match
Loading thumbnail…

Activity 7

This visualization displays the 2020 populations of 20 countries as a horizontal bar chart, using green bars sorted by country name on a blue-axis grid. Built with React and D3 v5, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `d3.csv` to load data from a GitHub-hosted dataset. The chart formats population values in billions using D3’s `format` function and includes tooltips via SVG `<title>` elements.

Bbogasamudramvamsikrishnareddy
93% match
Loading thumbnail…

Activity-6

This chart displays the populations of 20 countries in 2010 as a horizontal bar chart, ordering the bars by country name. It uses d3.scaleBand and d3.scaleLinear to position bars, with React components for axes and marks, rendering to SVG. Data is loaded via d3.csv from a GitHub raw dataset, with population values converted from a string column to numbers. The chart applies d3.format for compact tick labels, replacing 'G' with 'B' for billions.

Iiftequaruddin883@gmail.com
93% match
Loading thumbnail…

Activity 7

This interactive bar chart displays the populations of 20 countries from 2010, presented as horizontal bars ordered by country name. Built with React and D3 v5, the visualization uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart loads data from a remote CSV file and formats tick labels using D3's `format` function, converting values like "1.2G" to "1.2B" for readability.

Ssairamisetti3829@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart shows the populations of 30 countries in 2020, sorted by country name. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for the axes and data mapping. Population values are formatted in billions using d3.format, and the data is loaded from a remote CSV via d3.csv. Each bar includes a native SVG tooltip that displays the formatted population value.

GGunna,Praneeth Reddy
93% match
Loading thumbnail…

Activity 7

This bar chart displays the 2020 population for 20 countries, with horizontal green bars sorted by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and formats tick labels with `d3.format`. Data is loaded from a remote CSV via `d3.csv`, and SVG rectangles render each mark with a tooltip.

Ssaikrishnabussa
93% match
Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of population data for 20 countries in 2020, with bars arranged by country and length proportional to population. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes rendered via custom `AxisBottom` and `AxisLeft` components that use D3’s `format` function to abbreviate large numbers. The data is loaded asynchronously from a CSV file using D3’s `csv` method, and interactive tooltips display the formatted population value on hover.

Ppardha1411
93% match