Fork of Activity 6

100%

Fork of Activity 6

✓ Published0🌍 Public

Last edited Apr 4, 2024

Created on Apr 4, 2024

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

This bar chart displays the populations of 20 countries for the year 2010, using data fetched from a CSV file via the d3.csv function. The visualization renders as an SVG with React, using d3 scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Thick green bars represent population values, and hovering reveals tooltips via SVG title elements. The axis labels and tick formatting are built with custom React components for the bottom and left axes.

SSathishvepuri143@gmail.com

94% match

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

93% match

Loading thumbnail…

Fork of Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

Bbhavanadupati3@gmail.com

93% match

Loading thumbnail…

Fork of 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.

HHemanthh81

93% match

Loading thumbnail…

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav

93% match

Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Aaadesh.pranesh@gmail.com

93% match