Fork of Activity 7

100%

Fork of Activity 7

✓ Published1🌍 Public

Last edited Mar 26, 2024

Created on Mar 26, 2024

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of the top 20 countries by 2020 population, using a React-based SVG rendering. It maps the `Population` values to bar widths and `Country` names along the left axis, formatting population figures with D3’s `format('.2s')` to display billions. The code loads CSV data via `d3.csv`, then scales the bars using `scaleBand` and `scaleLinear`. Axis components are built manually with React, and tooltips are provided through SVG `<title>` elements. The chart’s styling includes blue tick lines, green bars, and a Poppins font.

Vvineelaramulapalli32

94% 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_2

This example shows a horizontal bar chart of the top 20 countries by 2010 population, sourced from a CSV file on GitHub. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to SVG bars, with `d3.csv` loading the data. The code imports local ES6 modules for axes and marks, formats population ticks with `d3.format`, and uses SVG `<title>` elements for tooltips. Axes are rendered as SVG groups, with styling applied via CSS classes.

Mmanishmanda@my.unt.edu

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

93% match

Loading thumbnail…

Fork of Activity 7

This example shows the 30 most populous countries in 2020 as a horizontal bar chart, with each bar’s length encoding population size and a tooltip revealing the exact value. The chart is rendered as SVG using React components for the axes and marks, while D3’s `scaleBand` and `scaleLinear` handle the positional scales. Data is loaded from a CSV file via a custom `useData` hook and the `d3.csv` function, with population values formatted using `d3.format`.

Ppvreswar7@gmail.com

93% match

Loading thumbnail…

Fork of Fork of Activity 7

This chart displays the populations of twenty countries in 2020 as horizontal bars, sorted by country name along the vertical axis and scaled linearly by population along the horizontal axis. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` handling the axis mappings and `format` producing the tick labels. Data is fetched via `d3.csv` from a remote GitHub-hosted CSV file, and each bar includes a tooltip showing its formatted population value.

Ssairamisetti3829@gmail.com

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

93% match

Loading thumbnail…

Fork of Fork of Activity 7

This visualization displays a horizontal bar chart of the top 20 countries by population in 2010, using data loaded from a CSV file via d3.csv. The React app renders SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, formatting tick labels with d3.format. Axes are custom components, and each bar includes a native SVG tooltip showing the population value using the same formatted scale.

Ggoudrohit2000@gmail.com

92% match