Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published0🌍 Public
SSiddhartha Alwala
Last edited Apr 9, 2024
Created on Apr 9, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart of the 2020 populations of the world’s most populous countries, ranked from largest at the top to smallest at the bottom, with populations displayed in billions. Built with React and D3.js, it uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis, rendering each bar as an SVG rectangle. Data is loaded asynchronously via D3’s `d3.csv` from a remote GitHub dataset, and hovering over a bar reveals its precise value using an SVG `<title>` tooltip.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

A horizontal bar chart shows the populations of the world's 30 most populous countries in 2020, sorted by country name along the y-axis and using a linear population scale on the x-axis. The chart is rendered as an SVG using React, with D3 v5 functions `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales, domain values, and tick labels. Population values are loaded from a CSV file via `d3.csv`, with the `'2020'` column multiplied by 1000 to represent actual population counts. Hovering over a bar displays the precise population value in a native `<title>` tooltip.

LLayaMyadam@my.unt.edu
93% match
Loading thumbnail…

Activity 6_Task1

A horizontal bar chart displays population data for various countries in 2020. The visualization uses D3’s `scaleBand` and `scaleLinear` to map country names and population values, with axes rendered as custom React components. The bar lengths encode population magnitude, and tick labels use D3’s `format` function to abbreviate large numbers (e.g., “1.2B”). The chart is rendered as SVG within a React application, drawing data loaded from an external CSV file.

Ttejaswiteju9811@gmail.com
93% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.

Kkrishnavisheshkatta@my.unt.edu
92% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart shows the 2020 population of 30 countries, sorted from largest at the top to smallest at the bottom. The visualization uses React components with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering marks as SVG rectangles. Data is loaded via d3.csv from a GitHub-hosted dataset, with population values formatted using d3.format. The chart includes labeled axes and a tooltip showing the exact population value for each bar on hover.

Kkoushikkumarreddykoorapati@my.unt.edu
92% match
Loading thumbnail…

Activity-6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, ordered from largest at the top to smallest at the bottom. Each bar’s length represents population in billions, with a labeled x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, scales it using d3.scaleBand and d3.scaleLinear, and renders SVG rectangles through React components. D3’s format function abbreviates large numbers, while the code also defines reusable AxisBottom, AxisLeft, and Marks components.

Tthoutunikhitha@gmail.com
92% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population of 30 countries, ranked from largest to smallest. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) positioning bars and axes. Population values are formatted with D3's Si-prefix format, converting billions to "B" notation. Data loads from a remote CSV file via d3.csv, and tooltips reveal precise population values for each bar.

Mmohanalaharic@gmail.com
92% match
Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

MMandadi Nishita
92% match
Loading thumbnail…

Activity 8 - Task 1

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, with the largest values extending farthest to the right. Built with React and rendered as SVG, it loads data from a CSV file using the `d3.csv` parser and uses D3 scales (`d3.scaleBand` and `d3.scaleLinear`) to map countries and population counts to positions. Custom axis components draw tick marks and labels, and tooltips formatted with `d3.format` appear on hover over each bar.

SSamir Tarda
92% match