Skip to main content
100%

activity6task-1

✓ Published0🌍 Public
Ssriharshakondakindi@gmail.com
Last edited Apr 2, 2024
Created on Apr 2, 2024
Forked from Hello VizHub

This bar chart displays the 2020 population estimates for 30 countries, with horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data loads from a CSV via `d3.csv` and renders as SVG `<rect>` elements. The bottom axis formats tick values using `d3.format`, and tooltips show population values on hover.

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…

Activity-6 Task1

This bar chart displays the 2020 population estimates for 30 countries, ordered by country name along the vertical axis and population magnitude along the horizontal axis. Built with React and D3 v5, the visualization uses SVG rectangles for the bars and custom axes. The `csv()` function loads the data, while `scaleBand()` and `scaleLinear()` map the categorical and continuous values. Hovering over a bar reveals a tooltip with the population formatted in billions via D3's `format()`.

Hharshaps15@gmail.com
96% match
Loading thumbnail…

task1_activity6

This bar chart displays the 2020 population estimates for 30 countries, ordered vertically by country name with horizontal bars representing population values. Population data is loaded from a GitHub-hosted CSV file and formatted using D3's SI format to display values in billions. The visualization is built with React components, using D3 v5 scales (`scaleBand` and `scaleLinear`) to map data, while SVG rectangles with native `<title>` tooltips render the bars. Axes are generated manually through custom React components rather than D3 axis generators, with styling applied via CSS classes.

Bbadiniswetha@gmail.com
96% match
Loading thumbnail…

Activity6_task1

This bar chart displays the 2020 population estimates for 30 countries, ranked from largest to smallest. It uses a horizontal layout where the bar length encodes population values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file via the `csv` function and rendered as SVG rectangles.

Hharshabandi3060@gmail.com
96% match
Loading thumbnail…

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

Mmeenam1106@gmail.com
95% match
Loading thumbnail…

Activity 6_task 1

This bar chart displays the 2020 population estimates for 30 countries, sourced from a CSV file loaded via d3.csv. The visualization uses React with D3 v5, employing scaleBand and scaleLinear for axes and rendering SVG rectangles for each bar. The chart includes labeled axes with formatted tick values, converting billions to a readable format, and tooltips showing exact population values on hover.

Ttallapanenisahithi@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This interactive bar chart displays the 2020 populations of the top 30 countries, with each country’s value encoded as a horizontal bar’s length. Built with React and SVG, the visualization uses D3 v5 scales (`scaleBand` for the categorical axis, `scaleLinear` for the numeric axis) and `format` to abbreviate population labels (e.g., “B” for billions). Data is loaded asynchronously from a CSV via D3’s `csv` and parsed into numeric population values, with marks rendered as colored rectangles.

Ssriharshakondakindi@gmail.com
95% match
Loading thumbnail…

Activity 7_Task1

This bar chart displays the 2020 population estimates for 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, rendering SVG elements through D3 v5 scales and components. It uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and formats tick labels with D3’s `format` function. Data is loaded asynchronously via `d3.csv` from a GitHub repository, and each bar includes a tooltip showing the precise population value.

HHarshita Vairagade
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 population of 30 countries, ranked vertically with horizontal bars extending to represent population size. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric population axis, with a zero baseline. The data is loaded from a CSV file and formatted using `d3.format` to abbreviate large numbers. SVG rectangles render the bars, with tooltips showing exact population values on hover.

YYeruva Snehith Reddy
95% match