Skip to main content
SimilarExport ZIP
100%

activity 6_Task1

✓ Published0🌍 Public
GGanesh Gundekarla
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Hello VizHub

This bar chart displays the 2020 population for 30 countries, using horizontal bars where length encodes the population value. The visualization is rendered as an SVG with React, using D3 version 5's `scaleBand` for the categorical y-axis of country names and `scaleLinear` for the numeric x-axis. Population data is loaded from a CSV file hosted on GitHub via D3's `csv` function. The axes are custom components (`AxisBottom`, `AxisLeft`), while the bars themselves are `rect` elements created in the `Marks` component.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 population for 30 countries, sorted along a linear scale, with country names on the y-axis. Built with React and D3 v5, it creates an SVG using `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. The data comes from a CSV file loaded with `d3.csv`.

Vvenkataravitarunelisetty@my.unt.edu
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Kkaringusathwika@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 population of 30 countries, with countries listed on the vertical axis and population values represented by horizontal bar lengths. The visualization is built using React with D3 v5 for data loading and scales, rendering to SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for abbreviating population labels (e.g., converting billions to "B"). Data comes from a remote CSV file via `d3.csv`, with population values multiplied by 1000 during parsing.

Ssaimanvith22@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name along the vertical axis. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, with SVG rectangles rendered via the `Marks` component. Horizontal axis labels apply D3’s `format` with a custom `.2s` tick formatter to abbreviate large numbers (e.g., “B” for billions). Data is loaded asynchronously from a CSV via `d3.csv` and multiplied by 1000 for actual population values.

Ssumanthpenna0221@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the 2020 population for 30 countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales from d3.scaleBand and d3.scaleLinear. Axes are custom components using d3 tick formatting, and the data is loaded from a CSV file via d3.csv with population values multiplied by 1000.

Hhkodiripaka15@gmail.com
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
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a vertical band scale. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with SVG rectangles drawn by the `Marks` component. The data is loaded asynchronously from a CSV file using `d3.csv`, and the population values are formatted in billions using D3’s `format` function. Tooltips reveal the exact population value for each bar on hover.

Cchandrikachowdary867@gmail.com
95% match