Skip to main content
SimilarExport ZIP
100%

Fork of Activity6_Task1

✓ Published0🌍 Public
PPreethi Medepalli-91
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Activity6_Task1

A horizontal bar chart displays the 2020 population for the top 30 countries, using green bars with blue axis ticks. The chart is built with React and D3 v5, where d3.scaleBand maps country names to the y-axis and d3.scaleLinear maps population values to the x-axis, with a custom tick formatter converting large numbers to billions. Data is loaded from a remote CSV via d3.csv, and tooltips show each bar's exact population value when hovered.

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…

Fork of Activity 6_Task1

This horizontal bar chart displays the 2020 population for thirty countries, using green bars and blue axis lines. Built with React and D3 v5, the visualization loads data from an external CSV via the `csv()` function and renders as an SVG. The code defines custom components for axes and marks, using `scaleBand` and `scaleLinear` for positioning, with tooltips showing formatted population values.

HHarshita Vairagade
95% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Ppraneeth.d555@gmail.com
94% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, using green bars sorted by country name on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The `format` function from D3 converts tick labels to abbreviated form (e.g., "1.2B"). Data is loaded asynchronously from a CSV file hosted on GitHub using D3's `csv` function, with bars rendered as SVG rectangles and tooltips showing the precise value.

Aanusha.chilkamarri26@gmail.com
94% match
Loading thumbnail…

Fork of activity 6_Task 1

This horizontal bar chart visualizes the 2020 population for 30 countries, sorted from largest to smallest, with a green fill and blue axis ticks against a clean background. The chart loads data from a GitHub-hosted CSV via `d3.csv` and renders it as SVG using React components. D3's `scaleBand` and `scaleLinear` position the bars, while `format('.2s')` formats tick labels to show values in billions. Interactive tooltips display the exact population representation for each bar.

SSumanthnaidu213
94% match
Loading thumbnail…

Fork of Activity6_ Task 1

This fork of Activity6 Task 1 presents a horizontal bar chart visualizing the 2010 populations of the top 10 countries, ranked using a `d3.scaleBand` on the y-axis and a linear scale (`d3.scaleLinear`) on the x-axis. Built with React and D3 v5, the chart renders as an SVG, with bar widths representing population values. Data is loaded from a remote CSV file via `d3.csv`. The axes are composed manually: the bottom axis uses `d3.format` to abbreviate large numbers, while the y-axis displays country labels from the scale's domain.

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

Fork of Activity 6_Task 1

A horizontal bar chart displays the 2020 population of thirty countries, with bars arranged alphabetically by country name. The chart loads data from a CSV file and renders it as an SVG using React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code defines custom axis components and a `Marks` component for the rectangles, which include tooltips formatted using D3's `format` function.

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

Fork of Activity 6_Task 1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, with SVG rectangles as marks. Data is loaded from a remote CSV file via `d3.csv`, and the x-axis labels are formatted using `d3.format` to abbreviate large numbers, converting gigabytes notation to billions for readability.

Nnavyabade05@gmail.com
93% match
Loading thumbnail…

Fork of Activity8_Task1_DV

This example presents a horizontal bar chart ranking the populations of 30 countries in 2020, using green bars to encode the population values along the x-axis, with country names on the y-axis. Written in React with D3 version 5, the code defines reusable components for axes and marks, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`. Data is loaded from a CSV file via the d3 `csv` function, and the rendering uses SVG `rect` elements. The chart includes axis labels, tick marks, and a tooltip showing abbreviated population values.

Llikithabaddam@my.unt.edu
93% match