Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 1

✓ Published0🌍 Public
Rreddyjathin95@gmail.com
Last edited Jul 12, 2024
Created on Jul 12, 2024
Forked from Hello VizHub

This interactive bar chart displays the population figures for 30 countries in 2020, with country names on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the data, rendering SVG rectangles via the `Marks` component. The chart features custom tick marks and labels, with population values formatted using `d3.format(‘.2s’)` and converted to billions. The data is loaded from an external CSV file using D3’s `csv` function, and tooltips show the precise population on hover.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 1

This interactive bar chart displays the 2020 population figures for 30 countries, using horizontal bars to rank each nation along a linear scale. The visualization employs React to manage the SVG rendering, with D3 v5 handling data loading, scales, and axis generation through functions like `scaleBand` and `scaleLinear`. Population data is fetched from a CSV file and formatted using D3's `format` utility, converting values to billions for tooltips. The chart features blue tick lines, green bars, and a Poppins font, with the y-axis listing country names and the x-axis labeled “POPULATION-2020.”

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

Activity 6_Task 1

This bar chart displays 2020 population estimates for 30 countries, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v6, employing `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles via the `Marks` component. The data is loaded asynchronously from a CSV file using the `csv` function, with population values multiplied by 1000 and formatted using `format('.2s')` to show values in billions. Native SVG `<title>` elements provide tooltips on hover.

NNithish Karanam
95% match
Loading thumbnail…

Activity 6 Task 1

This visualization displays the population of 30 countries in 2020 using a horizontal bar chart rendered as SVG in React. It imports D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to map country names to bar heights and population values to bar widths. The chart includes labeled axes, with the y-axis listing countries and the x-axis showing formatted population values (e.g., "1.2B") via a custom tick format. Data is loaded asynchronously from a remote CSV using the `csv` function, and tooltips appear on each bar via a native `<title>` element.

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

Activity 6_Task 1

This D3.js bar chart displays the population of 30 countries in 2020, using horizontal bars on a Cartesian grid. The visualization leverages React components and D3 version 5's `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. Data is loaded via a CSV URL providing population figures, which are formatted using D3's `format` function to display values in billions. The SVG rendering includes blue tick lines, green bars, and a labeled x-axis, with tooltips showing formatted population values on hover.

NNagalakshmi Thota
94% 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
94% match
Loading thumbnail…

Activity 6_Task 1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart. The chart 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 remote CSV file using D3’s `csv` function, and population values are multiplied by 1000. The SVG rendering uses custom React components for axes and marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers (e.g., “1.23B”).

Nnikhilthoutu24@gmail.com
94% match