Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Mmohanalaharic@gmail.com
Last edited Oct 30, 2025
Created on Oct 30, 2025
Forked from Hello VizHub

This bar chart displays the populations of 30 countries for 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, implementing custom `AxisBottom`, `AxisLeft`, and `Marks` components to render SVG elements. Population data is loaded via d3.csv, with values formatted using d3.format. Bars appear in green (#90ee90), while axes and labels use muted grays. The chart includes hover tooltips showing formatted population values, and the x-axis label indicates "POPULATION-2020".

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 populations of 30 countries, sorted along a vertical categorical axis. The visualization uses D3 v5 scales to map population values to horizontal bar lengths and country names to vertical bands. The React-based SVG rendering includes custom axis components that generate tick marks and labels, with a green fill for each bar. Population data is loaded from a remote CSV file, and a tooltip showing formatted population values appears when hovering over each bar.

Gganeshrajuparmalla@my.unt.edu
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
94% match
Loading thumbnail…

activity 6_Task1

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.

GGanesh Gundekarla
94% match
Loading thumbnail…

Activity-6 Task1

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with countries listed on the y-axis and population values extending to the right. Built with React and D3 v5, it renders SVG rectangles via the `Marks` component, while `AxisBottom` and `AxisLeft` generate the axes. Population values are loaded from a remote CSV and formatted with `d3.format`; hovering reveals a tooltip with the formatted value.

Hharshaps15@gmail.com
94% 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
94% match
Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays population figures for 30 countries in 2020, using a green rect for each country with a native SVG tooltip showing the formatted value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom` and `AxisLeft` components to render ticks. Population data is loaded from a remote CSV via `d3.csv`, with values multiplied by 1000 and formatted using `d3.format`. The chart includes a labeled population axis and blue tick lines.

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

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted by country name along the vertical axis. The chart uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are formatted using D3’s `format` function, converting billions to a readable label. The data is loaded via `d3.csv` from a remote GitHub source, and each bar includes a tooltip showing the formatted population value.

PPothuguntla Pranitha
94% match