Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

✓ Published0🌍 Public
HHemanthh81
Last edited Jul 2, 2023
Created on Jul 2, 2023
Forked from Activity 7

This bar chart displays the populations of 20 countries as horizontal bars, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` and `scaleLinear` for positioning, with population values loaded via `d3.csv` from a GitHub dataset. Axes are custom React components, and the x-axis uses `d3.format` to abbreviate tick labels from billions to "B" units.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, loaded from a CSV file. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Axes are generated with custom React components, and a tooltip using SVG `<title>` elements reveals precise values. The chart is formatted with D3's `format` function to abbreviate large numbers.

MManideeprenikindi
94% match
Loading thumbnail…

Fork of Fork of Activity 7

This is a horizontal bar chart showing the population of 20 countries in 2020, rendered as SVG elements within a React application. The chart uses D3 version 5 scales (`d3.scaleBand` and `d3.scaleLinear`) to map country names and population values to positions and lengths. Data is loaded from a CSV file via a custom `useData` hook, with tick marks styled blue and a green fill for each bar. Tooltips display the formatted population value on hover.

MManideeprenikindi
94% match
Loading thumbnail…

Fork of Activity 7

This visualization displays a horizontal bar chart of population data for 20 countries as of 2020, sourced from a GitHub-hosted CSV file. Using d3.scaleBand and d3.scaleLinear, the chart renders as an SVG, with blue tick lines for the y-axis and a population axis formatted with d3.format to abbreviate large numbers with 'B' for billions. Rectangles serve as marks, each with a tooltip showing the exact population value via an SVG title element. The visualization integrates D3 v5 with React, using hooks like useState and useEffect to load and manage data.

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

Fork of Activity 7

This example shows a horizontal bar chart comparing the 2020 estimated populations of 20 countries, with each bar’s length encoded by population value and labeled along the left axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis, `scaleLinear` for the population scale, and `format('.2s')` to abbreviate tick labels (e.g., “B” for billions). Data is loaded as CSV via `csv()` from a remote GitHub URL, with numeric values multiplied by 1000, and rendered as SVG `<rect>` elements with tooltips.

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

Fork of Activity 7

This example visualizes population data for 20 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization reads data from a CSV file via D3’s `csv` function, applies a `scaleBand` for country categories, and a `scaleLinear` for population values. React components render SVG elements, with `AxisBottom` and `AxisLeft` generating ticks, and `Marks` producing rectangles with `<title>` tooltips. The code uses D3 v5 and React 16.9.

MManideeprenikindi
91% match
Loading thumbnail…

Fork of Activity 7

This example visualizes population data for 20 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization reads data from a CSV file via D3’s `csv` function, applies a `scaleBand` for country categories, and a `scaleLinear` for population values. React components render SVG elements, with `AxisBottom` and `AxisLeft` generating ticks, and `Marks` producing rectangles with `<title>` tooltips. The code uses D3 v5 and React 16.9.

MManideeprenikindi
91% match