Skip to main content
SimilarExport ZIP
100%

Activity 6 Tutorial 1

✓ Published1🌍 Public
BBharath Vupputuri
Last edited Apr 4, 2025
Created on Apr 4, 2025
Forked from Hello VizHub

This horizontal bar chart displays the population of 30 countries for the year 2020, with country names labeled along the y-axis and population values represented by bar lengths along the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map the data, and renders SVG rectangles through custom `Marks`, `AxisBottom`, and `AxisLeft` components. Population values are formatted with D3’s `format` function, and the data is loaded asynchronously from a CSV file using `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6 Tutorial 1

This example presents a horizontal bar chart showing the 2020 population for 30 countries. The visualization uses D3 v5 for data loading and scaling, with React components for rendering each SVG element. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks and bar rectangles. The data is fetched from a CSV file using D3’s `csv` function, and tooltips display formatted population values.

BBamanGayathri
96% match
Loading thumbnail…

Activity 6

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React components render the SVG elements. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers, for example converting Gigas to Billions. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

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

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
94% match
Loading thumbnail…

Activity6_Tutorial1

This bar chart displays the 2020 populations of 30 countries, sorted by country name along the vertical axis with population values extending horizontally. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles for each bar. The data is loaded as CSV via `d3.csv` from a GitHub repository, with axis ticks formatted using `d3.format`. Tooltips show exact population values on hover, and tick lines are styled blue with a light green bar fill.

Kkandooriabhiram@gmail.com
94% match
Loading thumbnail…

Activity6_tutorial1

This bar chart displays the 2020 population of 30 countries, sorted alphabetically, using horizontal bars encoded by population size. It is built with React and D3 v5, using `scaleLinear` and `scaleBand` to map population values to bar widths and countries to row positions. Axes, tick labels, and rectangles are rendered as SVG elements, with a native SVG `<title>` element providing tooltips. Population data is loaded from a CSV file hosted on GitHub, with values formatted using D3's `format` function.

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

Activity 6

A horizontal bar chart displays the population of 30 countries in 2020, ordered by country name on the y-axis. A linear x-scale encodes population values, with formatted tick labels converting scientific notation to billions (e.g., “1.40B”). Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for axes, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Axis ticks are styled with blue lines, and tooltips show the formatted population value on hover.

Aanushapodapati99@gmail.com
94% match
Loading thumbnail…

Activity 6

A horizontal bar chart shows the populations of 30 countries in 2020, sorted by country name. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for the axes and data mapping. Population values are formatted in billions using d3.format, and the data is loaded from a remote CSV via d3.csv. Each bar includes a native SVG tooltip that displays the formatted population value.

GGunna,Praneeth Reddy
94% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name, with each bar’s length representing population in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` marks with tooltips via `<title>`. Data is loaded from a remote CSV using `d3.csv`, and axes are rendered by custom components (`AxisBottom`, `AxisLeft`) with tick formatting via `d3.format`.

Gganesh.hns48@gmail.com
94% match