Fork of Fork of Activity 6

100%

Fork of Fork of Activity 6

✓ Published0🌍 Public

Last edited Apr 3, 2025

Created on Apr 3, 2025

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6

This example presents a horizontal bar chart showing 2020 population data for 30 countries, with bars encoded by population magnitude and country names along the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and renders SVG rectangles with tooltips via the `<title>` element. Data is loaded from a CSV using `d3.csv`, with population values transformed by multiplying the raw figures by 1,000. Axis labels and ticks are styled with CSS, and the chart includes formatted tick labels using `d3.format`.

NNithish Karanam

94% match

Loading thumbnail…

Fork of Activity 6

A horizontal bar chart displays the populations of twenty countries using data from a CSV file, with a linear scale for population values and a band scale for country names. D3 v5 utilities (`csv`, `scaleLinear`, `scaleBand`, `max`, `format`) handle data loading and scaling within a React component. The SVG bars include native tooltips via `<title>` elements, styled with blue tick lines and green bars.

Vvarmanithish5@gmail.com

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

This bar chart displays the 2020 populations of 30 countries, ordered vertically by country name with horizontal bars representing population values. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, scales population data from a CSV file, and renders SVG marks with custom axis components. Tooltips appear via native SVG `title` elements.

Rrahulnathmukkolla@gmail.com

93% match

Loading thumbnail…

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

Vvidyagangasani@my.unt.edu

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