Skip to main content
SimilarExport ZIP
100%

Fork of Activity 7

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

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

Fork of Activity 7

This is a horizontal bar chart showing the 2020 population estimates for 30 countries and territories, with bars colored in light green against a white background. The chart uses React with D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file and formatted using D3’s `format` function to display values in billions with a "B" suffix. SVG rectangles are rendered for each bar, with tooltips revealing the exact population value.

Vvamsikrishnakanchukommala@my.unt.edu
94% match
Loading thumbnail…

Fork of Activity 7

This chart displays the 2020 population of 30 countries as a horizontal bar chart, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The bars are drawn as `rect` elements with tooltips, while axis ticks are styled—bottom ticks blue and labels gray—via `AxisBottom` and `AxisLeft` components, with tick formatting using D3's `format('.2s')` to abbreviate large numbers.

Aabjalshaik02@gmail.com
94% match
Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Rravularasesh3102@gmail.com
94% 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
94% match
Loading thumbnail…

Fork of Activity 6

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical axis and `scaleLinear` for the population values. Bar lengths are encoded with `rect` marks, and axis ticks are generated with the custom `AxisBottom` and `AxisLeft` components. The data is fetched as CSV from a GitHub-hosted dataset, with population values multiplied by 1,000 for display.

KKritin Kesav
94% 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
94% match
Loading thumbnail…

Fork of Fork of Activity 6

This is a horizontal bar chart displaying the 2020 populations of 30 countries, rendered as SVG rectangles. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names and population values to coordinates, with `csv` fetching the data from a GitHub gist. Green bars are overlaid with a tooltip showing the formatted population value, and the chart includes styled axes with blue tick lines and a labeled x-axis.

NNithish Karanam
94% match