Skip to main content
SimilarExport ZIP
100%

Activity 7

✓ Published0🌍 Public
SSwapna1915
Last edited Jul 10, 2023
Created on Jul 3, 2023
Forked from Hello VizHub

This horizontal bar chart displays the population of ten countries in 2020, with bars extending from left to right in descending order. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and renders SVG rectangles. Country names appear on the y-axis, while population values are formatted in SI units (e.g., "1.2B") on the x-axis. Data loads asynchronously from a CSV file and displays a "Loading..." message until ready.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ordered along a categorical y-axis and a linear x-axis. The visualization is rendered with React and SVG, leveraging D3’s `scaleBand`, `scaleLinear`, and `format` APIs to compute positions and abbreviate tick labels. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with hover tooltips revealing exact population values through native SVG `<title>` elements.

Vvarun.mahankali39@gmail.com
93% match
Loading thumbnail…

Activity 7

This horizontal bar chart displays the 2010 populations of ten countries, sorted by name along the y-axis. The visualization uses React with D3.js v5, constructing an SVG with scales from `d3.scaleBand` and `d3.scaleLinear`. The population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` (abbreviated to billions), and rendered as green rectangles. Axis tick marks and labels are styled with blue lines and gray text, with a cumulative x-axis label reading "POPULATION-2010".

LLakshmanRangisetti
93% match
Loading thumbnail…

Activity 7_Part1

This visualization displays the population of ten countries in 2020 as a horizontal bar chart, with countries sorted on the y-axis and population shown on the x-axis. The bars are rendered as SVG rectangles using React components, with the population values scaled by a linear axis and formatted in a compact, readable way (e.g., "1.2B"). The chart is built with D3.js v5 for data loading and scaling functions, including `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `csv` for fetching the dataset from a remote GitHub source. Axis ticks and labels are styled with a brown line color and a Poppins font, and each bar includes a tooltip showing the population value.

Rrikhitakoganti12
93% match
Loading thumbnail…

Activity-6-q1.1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ordered by country name. The visualization is built with React and D3 v5, employing `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via `d3.csv`, with population values parsed as numbers. SVG rectangles render the bars, while custom `AxisBottom` and `AxisLeft` components create the axes, and text labels are formatted using `d3.format`.

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

Activity 6_1

A horizontal bar chart displays the populations of ten countries in 2020, sorted by country name along the y-axis and using a linear population scale on the x-axis. Built with React and D3 v5, the visualization uses `d3.scaleBand` for categorical positioning and `d3.scaleLinear` for the continuous population mapping, while `d3.format` transforms tick labels from gigabytes to billions. Data is loaded asynchronously from a CSV file via `d3.csv`. SVG rectangles render the bars, with hover tooltips showing formatted population values. Axis components are custom React functions, and styling is applied through CSS classes.

Jjayanthbalina@gmail.com
93% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of ten countries for the year 2000, with each bar's length proportional to its population value. The chart uses a green fill for the bars and blue axis tick marks. Built with React and D3 version 5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders as SVG. Population data is loaded from a remote CSV file using `d3.csv`, and D3's `format` function converts large numbers to a compact "B" (billion) notation for axis labels and tooltips.

KKarnam Abinay Goud
93% match
Loading thumbnail…

Activity 7

A horizontal bar chart displays the 2020 populations of ten countries, sorted by country name, with bars rendered as green SVG rectangles. The chart uses D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen positions, while React components build the axes and marks. Data loads from a remote CSV file, with population values converted from thousands. Axis tick labels use D3's `format` to abbreviate large numbers, and hovering over a bar reveals a native tooltip with the formatted value.

Aakshayvenishetty1437
93% match
Loading thumbnail…

Activity6_Q1.1

A horizontal bar chart displays the population of ten countries in the year 2000, with bars extending from left to right and ordered by country name. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file using D3's `csv` function. Each bar includes a native SVG `<title>` tooltip showing the formatted population value, and the x-axis tick labels convert SI units from 'G' to 'B' using D3's `format`.

JJhansi Balla
93% match