Skip to main content
SimilarExport ZIP
100%

Activity6_Task1

✓ Published1🌍 Public
VVidya Lakshmi Chitturi
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Hello VizHub

This is a horizontal bar chart displaying the 2020 populations of 30 countries, loaded from a CSV file and sorted from largest to smallest. The visualization is rendered as an SVG using React and D3 v5, with `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom `AxisBottom` and `AxisLeft` components for ticks. Green rectangles represent data values, with tooltips showing the formatted population in billions. The chart is part of a React app using `useData` to fetch and parse the data, with axes styled via CSS.

AI-generated description
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
96% 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
95% match
Loading thumbnail…

Activity6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, ranked with the most populous at the top. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a remote CSV file via `d3.csv` and formatted using `d3.format` to show values in billions. SVG rectangles with tooltips, styled in light green, represent each country's population.

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

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Hharsha13638@gmail.com
95% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Aamarnadhkari98@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name along the y-axis, using a React and D3 v5 stack. The visualization imports `scaleBand` and `scaleLinear` from D3 to map country names and population values to SVG rectangles, with axes generated by custom `AxisBottom` and `AxisLeft` components. Data loads from a CSV via `d3.csv` and formats tick labels with `d3.format`. Hovering over a bar reveals its exact population through a native SVG `<title>` tooltip.

Ssiddhubhupathi@gmail.com
94% match
Loading thumbnail…

Activity8_Task1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted alphabetically by country name, with green bars extending from a blue left axis. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, formatted using d3.format. Population data is loaded from a CSV file via d3.csv, and hover tooltips reveal exact values through SVG title elements.

Vvishnupriyapalagiri@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

This visualization shows a horizontal bar chart of population data for 30 countries in 2020, using a categorical y-axis for country names and a linear x-axis for population values. The React app loads CSV data from GitHub via the `csv` function in d3.v5, scales it with `scaleBand` and `scaleLinear`, and renders SVG bars with green fills and blue tick lines. Mouse hover reveals population values through SVG `<title>` tooltips, with axis labels formatted using `format('.2s')` to abbreviate large numbers as billions.

CChandra Prakash Reddy Kalwakolu
94% match