Skip to main content
SimilarExport ZIP
100%

Activity-6

✓ Published0🌍 Public
NNithish Karanam
Last edited Apr 5, 2025
Created on Apr 5, 2025
Forked from Activity 7

This example shows a horizontal bar chart of the 30 most populous countries in 2020. Each bar’s length represents population, with a green fill and tooltips displaying formatted values, while the y-axis lists country names. The visualization is built with React and renders SVG elements. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and a CSV file fetched from a GitHub repository as the data source. Axis ticks are customized via `d3.format` to abbreviate large numbers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of 30 countries in 2020, ordered alphabetically from top to bottom. Each green bar’s length represents population, with a tooltip showing the exact value on hover. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads data from a GitHub-hosted CSV file. SVG rendering includes custom `AxisBottom` and `AxisLeft` components to draw axes with labeled ticks.

Ggnitishreddy0245@gmail.com
93% match
Loading thumbnail…

Activity 6

This example shows the 2020 population for 30 countries as a horizontal bar chart built with React and D3 v5, rendered as SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format('.2s')` to abbreviate tick labels (e.g., converting G to B). Data is loaded asynchronously from a remote CSV via D3’s `csv` method, with the axis and marks defined as reusable React components.

NNithish Karanam
93% match
Loading thumbnail…

Activity-6

This horizontal bar chart displays the populations of 30 countries for the year 2020, ordered along the y-axis. Built with React and D3 v5, it renders as an SVG, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, with data loaded from a CSV file. The bars’ widths encode population values, and a tooltip (via the SVG `<title>` element) shows the formatted value on hover.

Mmanisahiths54321@gmail.com
93% match
Loading thumbnail…

Activity 6_Task1

This example shows a horizontal bar chart of the 30 most populous countries from a 2020 dataset, using population values displayed on the x-axis and country names on the y-axis. The React-based visualization uses D3 v5’s `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `<rect>` elements via the `Marks` component. Data is loaded asynchronously from a CSV using `d3.csv`, with axes generated by `AxisBottom` and `AxisLeft` components. The chart includes formatted tick labels (e.g., converting billions) and a title, with green bars styled via CSS.

HHarshita Vairagade
93% match
Loading thumbnail…

Activity 6_Task1

This example shows a horizontal bar chart of the 30 most populous countries from a 2020 dataset, using population values displayed on the x-axis and country names on the y-axis. The React-based visualization uses D3 v5’s `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `<rect>` elements via the `Marks` component. Data is loaded asynchronously from a CSV using `d3.csv`, with axes generated by `AxisBottom` and `AxisLeft` components. The chart includes formatted tick labels (e.g., converting billions) and a title, with green bars styled via CSS.

HHarshita Vairagade
93% match
Loading thumbnail…

Activity-6

This example shows the populations of 30 countries in 2020 as horizontal bars. A bar chart uses a linear scale for population values on the x-axis and a band scale for country names on the y-axis. The visualization is rendered with React and D3 v5’s `scaleBand`, `scaleLinear`, and `format` APIs, drawing SVG rectangles as marks. Data loads from a CSV file, and tooltips display formatted population values.

KKavyaEti
93% match
Loading thumbnail…

Activity6 Task 1

This horizontal bar chart displays the 30 most populous countries in 2020, with each bar’s length encoding population size. The visualization arranges countries vertically in descending order using a band scale and positions bars with a linear scale. Built with React and D3 v5, it renders SVG elements through reusable components for axes and marks. Population data is loaded from a GitHub-hosted CSV file, with values transformed from thousands to raw numbers. The chart includes formatted tick labels converting gigabytes to billions and styled axis lines and bars.

Aanisha.peddireddy@gmail.com
92% match
Loading thumbnail…

Activity 6

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name. The visualization uses React with D3 version 5, employing `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Data loads from a CSV file via `d3.csv`, with population values multiplied by 1000, and renders as SVG rectangles with tooltips. Axis components and marks are modularized as separate ES6 modules, with styling applied via CSS classes.

Nnandasaipalankius@gmail.com
92% match