Skip to main content
SimilarExport ZIP
100%

Activity 6 Task 1

✓ Published0🌍 Public
Sskykarthik97@gmail.com
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Activity 7

This interactive SVG bar chart displays the 2020 populations of 30 countries, ranked from largest to smallest, using a horizontal layout. Built with React and D3 v5, it visualizes data from a CSV file, rendering bars with a light green fill and blue tick marks on the axes. The chart leverages D3’s `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates, while the `AxisBottom`, `AxisLeft`, and `Marks` components generate the SVG elements. Tooltips are provided via native SVG `<title>` elements, and axis labels use a formatted scale for readability.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 population of 30 countries, sorted from largest to smallest on the y-axis. The visualization uses React with D3 v5 scales, where `scaleBand` positions the country bars and `scaleLinear` maps population values to bar widths. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that format tick labels, and each bar contains a native HTML `<title>` tooltip showing the exact population value. Data is loaded from an external CSV file using D3's `csv` function.

JJhansi Balla
94% match
Loading thumbnail…

Activity-6 Task-1

This example shows a horizontal bar chart of 2020 population data for 30 countries, ranked from largest to smallest at the top. The SVG visualization uses React components to render the chart, with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Bar lengths encode population values, and hovering over a bar reveals its formatted value via a tooltip. Axes are drawn with custom `AxisBottom` and `AxisLeft` components that generate tick marks and labels, while the data is fetched from a CSV file using D3’s `csv` function.

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

Activity 6_Task 1

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

MMandadi Nishita
94% match
Loading thumbnail…

activity 6 task 1

This horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest. The visualization loads data from a CSV file via `d3.csv`, processes it with React state management, and renders the chart using SVG. D3’s `scaleBand` and `scaleLinear` map countries to horizontal bars, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the ticks and rectangles. The x-axis labels are formatted using `d3.format` with a custom function that converts gigabytes to billions.

AAamani Chamarthi
94% match
Loading thumbnail…

Activity-6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, ordered from largest at the top to smallest at the bottom. Each bar’s length represents population in billions, with a labeled x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, scales it using d3.scaleBand and d3.scaleLinear, and renders SVG rectangles through React components. D3’s format function abbreviates large numbers, while the code also defines reusable AxisBottom, AxisLeft, and Marks components.

Tthoutunikhitha@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 populations of 30 countries, ranked from largest to smallest along the vertical axis. The horizontal bars use a green fill, with the x-axis formatted in billions using D3’s `format` function. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. SVG rendering handles the axes and marks, with tooltips provided by SVG `<title>` elements showing the formatted population value.

PPadmajaKodati@my.unt.edu
93% match
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file via `d3.csv`, and each bar’s value is formatted using D3’s `format` function, with tooltips showing the abbreviated population.

Vvenkatamanikantavaddi@my.unt.edu
93% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest with green bars and a blue axis. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to render SVG marks, with custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file via `useData`, and the x-axis formats values using D3's `format` API to abbreviate large numbers. Tooltips provide exact population values on hover.

Mmeghna.reddy700@gmail.com
93% match