Fork of Avtivity-6-Task-1

100%

Fork of Avtivity-6-Task-1

✓ Published0🌍 Public

Last edited Apr 4, 2024

Created on Apr 4, 2024

A horizontal bar chart displays 2020 population estimates for 30 countries, using a D3 scaleBand for country categories on the y-axis and a scaleLinear for population values on the x-axis. The React app fetches a remote CSV via d3.csv and converts string values to numbers. SVG rectangles render each bar, with axes generated by custom React components, and tick labels formatted using d3.format’s SI notation with "G" replaced by "B" for billions.

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

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to bars and population values to bar widths, rendered as SVG `<rect>` elements with a `<title>` tooltip. The data is loaded via `d3.csv` from a GitHub gist, and axes are built custom components using D3’s tick generation.

Llokasaivenkatatammineedi@my.unt.edu

92% match

Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Vvamsikrishnakanchukommala@my.unt.edu

91% match

Loading thumbnail…

Fork of activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name along the y-axis. The chart uses React to render SVG marks, with D3 v5’s `scaleBand` and `scaleLinear` to position bars and axes, and `format` to abbreviate population values (e.g., “B” for billions). Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with raw population values multiplied by 1,000. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are built as React components, and each bar includes a native SVG `<title>` tooltip.

Ggouthamigongidi2457@gmail.com

91% match

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

91% match

Loading thumbnail…

Fork of Activity-6_Task-1 dummy

This bar chart displays the 2020 population estimates for 30 countries, sourced from a GitHub-hosted CSV file. It uses React to render SVG elements, with D3 v5 functions like `scaleBand` and `scaleLinear` to position bars and axes. The bars are colored green, and each includes a native SVG `<title>` tooltip showing the formatted population value. Custom axis components handle the bottom and left tick marks, with population labels abbreviated using D3’s `format` API.

Sshravan.s0710@gmail.com

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

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

91% match

Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example shows a horizontal bar chart of population totals for 30 countries in 2020. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names to bar positions and population values to bar widths. Axes are generated by custom React components (`AxisBottom`, `AxisLeft`) that call `xScale.ticks()`. Tooltips appear via SVG `<title>` elements, and population data is loaded from a remote CSV using D3’s `csv` function.

Hharsha13638@gmail.com

91% match