Skip to main content
SimilarExport ZIP
100%

ACT6_TASK2.2

✓ Published0🌍 Public
RRevanth putta
Last edited Oct 26, 2025
Created on Oct 26, 2025

This stacked bar chart displays the projected 2020 population distribution for ten countries, split into three synthetic demographic groups. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG rectangles. Data comes from the UN Population 2019 CSV, processed by `d3.csv`. Each bar segment's length reflects a fixed percentage of total population, with colors assigned via `d3.scaleOrdinal`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ACT6_TUT1_TASK3

This stylized bar chart uses a horizontal layout to compare the 2010 populations of twenty countries, encoding values with bar lengths on a linear scale. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes and positioning, with SVG `<rect>` marks that display a tooltip on hover. The chart applies a clean, minimal aesthetic with a Poppins font, custom tick and axis styling, and a teal fill for bars. Data is loaded from a CSV file hosted on GitHub, and axis labels are formatted to abbreviate large numbers, such as replacing 'G' with 'B'.

RRevanth putta
88% match
Loading thumbnail…

Stylised Bar Chart

This stylised bar chart displays the top 10 countries by projected 2020 population, sourced from UN population data. Built with React and rendered as SVG using D3 v6 utilities, the chart uses a horizontal bar layout with a linear scale for population and a band scale for countries. The code imports `scaleBand`, `scaleLinear`, and `format` from D3, while custom React components handle axis and bar rendering. Population values are formatted with SI prefixes, converting gigabytes to billions for tick labels and tooltips.

SSabin Bhandari
87% match
Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the projected 2020 population for each country from the UN Population 2019 dataset. The chart is rendered as an SVG using React to map data to rectangles, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The code uses React’s `useState` and `useEffect` to fetch and parse the CSV via D3’s `csv` function. The bars are styled with a blue fill via the CSS class `bar`.

JJacob Potvin
87% match
Loading thumbnail…

task8

A horizontal bar chart displays the 2020 population estimates for 30 countries, sorted by country name along the y-axis with population magnitudes encoded as bar lengths on the x-axis. Built with React and D3 v5, the visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and SVG rectangles for marks, with tooltips formatted using d3.format. Population data is loaded from a remote CSV file via d3.csv, and custom React components render the axes and marks.

Ssruthimreddy6@gmail.com
87% match
Loading thumbnail…

Act 6 task1

A horizontal bar chart displays 2020 population estimates for 30 countries, sorted by country name, with green bars and blue tick marks. The visualization uses React with D3 v5 scales (`scaleBand`, `scaleLinear`) to map country names to y-axis positions and population values to bar widths, rendering SVG rectangles via a custom `Marks` component. Data loads asynchronously from a GitHub-hosted CSV file using `d3.csv`, and axis labels are formatted with D3's `format` function to abbreviate large numbers.

BBhavana Sharma
87% match
Loading thumbnail…

activity6task-1

This bar chart displays the 2020 population estimates for 30 countries, with horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data loads from a CSV via `d3.csv` and renders as SVG `<rect>` elements. The bottom axis formats tick values using `d3.format`, and tooltips show population values on hover.

Ssriharshakondakindi@gmail.com
87% match
Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the top 10 countries by projected 2020 population, using horizontal bars whose lengths encode the population values. The visualization pairs a D3.js v5 linear scale for the x-axis with a band scale for categorical country labels, while React renders each bar as an SVG rectangle. The design features custom fonts (Pacifico and Open Sans Condensed) and a distinct color palette for axis ticks and marks. Data originates from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function, and includes tooltips formatted in billions using `d3.format`.

CChira Cezara Victoria
87% match
Loading thumbnail…

Activity6_Task1

This bar chart displays the 2010 population estimates for 20 countries, ranked vertically by country name. Data is loaded from a remote CSV file and rendered as SVG rectangles using React. The visualization uses D3 v6 scales (`scaleBand` and `scaleLinear`) along with custom `AxisBottom` and `AxisLeft` React components. Axes are formatted with D3's `format` function to abbreviate large population values, and tooltips show the same formatted values on hover.

Kkandooriabhiram@gmail.com
87% match