Skip to main content
SimilarExport ZIP
100%

Activity6_Task 1

✓ Published0🌍 Public
Ppraneeth.d555@gmail.com
Last edited Oct 17, 2024
Created on Oct 17, 2024
Forked from Hello VizHub

This horizontal bar chart displays the top 30 countries by 2020 population, with country names on the y-axis and population values along the x-axis. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. Data loads asynchronously from a GitHub-hosted CSV via `d3.csv`, and the bars render as SVG `<rect>` elements with tooltips formatted using `d3.format`.

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

This bar chart displays the top 30 countries by 2020 population, ranked along a vertical band scale. The visualization uses D3 v5 for data loading and scale creation, with React components rendering SVG rectangles for each bar. The code applies `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, formatting tick labels with `d3.format`. Data is fetched as CSV from a GitHub repository, with values multiplied by 1000 to represent actual population figures.

UUday Vandanapu
96% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order. The visualization uses a linear x-scale for population values and a band y-scale for country names, with teal bars rendered as SVG rectangles in a React component. Data is loaded via `d3.csvParse` from a GitHub gist, with axis ticks formatted in millions. The code demonstrates React state management with `useState` and `useEffect` hooks alongside D3’s `scaleLinear` and `scaleBand` APIs.

SSrihith Reddy Gaddam
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the top 30 countries by 2020 population, using horizontal bars to compare values against a linear scale. The visualization sorts countries vertically with a band scale, formats tick labels using D3’s `format` function to abbreviate numbers, and renders axes and marks as SVG elements within a React component. Data loads asynchronously via `d3.csv` from a remote GitHub repository, with tooltips showing formatted population values on hover.

Kkowshiksamudrala08@gmail.com
95% match
Loading thumbnail…

Activity6_Task 1

This bar chart displays the top 30 countries by population in 2020, using horizontal bars sorted by country name. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis) managing coordinate mapping. Population values are loaded from a CSV file and formatted with a custom tooltip using D3's format function. The chart includes styled axes, hover effects, and a maximum domain slightly exceeding the largest population value.

Hharinihari6791@gmail.com
95% match
Loading thumbnail…

Activity6_Task 1

This interactive horizontal bar chart visualizes the 2020 population of 30 countries, using D3 v5 within a React framework. The chart uses SVG rendering, with `d3.scaleBand` and `d3.scaleLinear` to map the categorical country names and numerical population values. Each bar’s length encodes the population data, with a tooltip displaying the formatted value in billions. The chart includes styled axes with blue tick lines and labeled tick marks, and a bottom axis label reading "POPULATION-2020". The data is loaded from a CSV file using D3’s `csv` function and displayed with a green bar fill.

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

activity 6_Task 1

A horizontal bar chart displays population figures for the top 30 countries in 2020, using a linear scale for population and a band scale for country names. The visualization, built with React and D3 v5, renders SVG rectangles whose lengths encode population values, with axes and tick labels generated by custom components. Data is loaded from a CSV file via D3's `csv` function, and the axis formatting converts large numbers to abbreviated labels.

Mmaheshsachin1234@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the top 30 countries by 2020 population, sorted in descending order with a teal fill. The visualization uses d3.csv to load data from a GitHub-hosted CSV file, d3.scaleLinear and d3.scaleBand to map population values and country names to SVG coordinates, and d3.axisBottom with custom tick formatting to label values in millions and billions. Bars are rendered as SVG rect elements within a React framework, with an interactive hover effect that reduces opacity.

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

Activity8_task1

A horizontal bar chart displays the top 30 countries by 2020 population, with bars sorted by country name and lengths proportionally scaled to population values. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) mapping data to positions. CSV data loads from a GitHub repository and processes the 2020 column by multiplying by 1000. The chart includes axis components with formatted tick labels converting G to B for billions, plus a light green bar fill and tooltips showing exact values.

Ssirichandana017@gmail.com
94% match