Fork of Fork of Activity 7

100%

Fork of Fork of Activity 7

✓ Published1🌍 Public

Last edited Oct 19, 2024

Created on Oct 19, 2024

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.

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 shows the population of thirty countries in 2020 as a horizontal bar chart, with a title labeling the x-axis "POPULATION-2020". It uses React to render an SVG and the D3 v5 library's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. D3's `format('.2s')` formats axis tick labels (e.g., converting values to billions), and the `csv` function loads population data from a remote GitHub CSV file. The chart is interactive only through SVG `<title>` tooltips showing exact values.

Vvamsikrishnakanchukommala@my.unt.edu

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

94% match

Loading thumbnail…

Fork of activity 6_ Q1.1

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale. Each bar’s length encodes population via a linear scale, with axis ticks formatted in billions and a labeled horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` from D3 for scales and `csv` to load data from a GitHub-hosted CSV. SVG rendering is handled through React components, with tooltips provided by native `<title>` elements.

Kkowshiksamudrala08@gmail.com

93% match

Loading thumbnail…

Fork of Activity 7

This chart shows the population of twenty countries in 2020, sorted alphabetically along the y-axis. An interactive SVG rendering uses horizontal bar lengths to encode each value. The React app loads CSV data from a remote GitHub source, then uses D3 v5's `scaleBand` and `scaleLinear` to position elements. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components, relying on `d3.csv` for parsing and `d3.format` for tick labels.

Vvineelaramulapalli32

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