Fork of Activity 7

100%

Fork of Activity 7

✓ Published0🌍 Public

Last edited Oct 24, 2024

Created on Oct 24, 2024

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.

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

95% match

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

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

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

94% match

Loading thumbnail…

Fork of Activity 7

This horizontal bar chart displays the 2020 population of 30 countries, sorted in descending order with a green bar for each nation. The visualization loads CSV data from a GitHub gist and renders vector graphics using React with D3 v5, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes and bars are drawn as SVG elements via React components, with tooltips showing formatted population values.

Bbudalavijay2001@gmail.com

94% match

Loading thumbnail…

Fork of Activity-6

This fork of Activity-6 presents a horizontal bar chart that ranks the top 30 countries by their 2020 population, using data from a CSV file hosted on GitHub. The bars are drawn as SVG rectangles, with their widths scaled by population values and their vertical positions determined by a categorical y-scale. The visualization uses D3 v5 for data loading (via `d3.csv`) and scale construction, while React manages the component state and rendering. Axis components render tick marks and labels, and hovering over a bar reveals its exact population value through a native SVG `<title>` tooltip.

KKarnam Abinay Goud

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