Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published0🌍 Public
FFayezuddin Mohammed Khan
Last edited Nov 1, 2025
Created on Nov 1, 2025
Forked from HTML Starter

This example shows a horizontal bar chart ranking the populations of 30 countries in 2020, using a scaleBand for the categorical country axis and a scaleLinear for the numeric population axis. The bars are rendered as SVG rectangles with a light green fill that darkens on hover, and each includes a tooltip showing the formatted population value. Built with React and D3 v5, it loads CSV data via `d3.csv`, formats tick labels with `d3.format`, and uses custom axis components to display the population scale with billions abbreviated as "B".

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6-Task1

This example shows a horizontal bar chart ranking the populations of 30 countries for 2020, with each bar’s length encoding the population value and a text label for the country name. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a remote CSV via `useData` and `d3.csv`, with population values multiplied by 1000. Axes are rendered as SVG groups, and bars include a native `<title>` tooltip showing the formatted population value.

Ppslharika@gmail.com
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
93% 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
93% match
Loading thumbnail…

Activity 6

This example shows a horizontal bar chart comparing the 2020 population of 30 countries. The chart uses D3.js v5 scales to map country names and population values to the SVG canvas, with each bar's length proportional to its population. The bars are rendered as SVG rectangles, and hovering over a bar displays its formatted population value in a tooltip. The React application loads the data from a remote CSV file and uses D3's `scaleBand` and `scaleLinear` for positioning, with custom axis components for the bottom and left edges.

Mm.maanvireddt761@gmail.com
93% 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
93% match
Loading thumbnail…

Activity_6_test2

This example shows a horizontal bar chart ranking the populations of 20 countries in 2010, with data loaded from a remote CSV and rendered as an SVG using React and D3 v5. It uses `d3.csv` to fetch and parse the dataset, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. Custom React components draw the axes and marks, with green bars whose widths encode population values and tooltips showing formatted numbers via `d3.format`.

HHafsa Hayath
93% match
Loading thumbnail…

Activity 6

This visualization displays the 2020 populations of 30 countries as a horizontal bar chart, using a band scale for country names and a linear scale for population values. The chart shows bars in light green with blue tick marks on the axes, and includes a tooltip formatted with D3's `format` API to abbreviate large numbers (e.g., "1.2B"). Built with React and D3 v5, the code explicitly uses `scaleBand`, `scaleLinear`, and `max`, while a custom `useData` hook fetches CSV data from a GitHub repository. The SVG is rendered via React components (`AxisBottom`, `AxisLeft`, `Marks`).

Pperamranji
93% match
Loading thumbnail…

Activity 6

This visualization displays the 2020 populations of 30 countries as a horizontal bar chart, using a band scale for country names and a linear scale for population values. The chart shows bars in light green with blue tick marks on the axes, and includes a tooltip formatted with D3's `format` API to abbreviate large numbers (e.g., "1.2B"). Built with React and D3 v5, the code explicitly uses `scaleBand`, `scaleLinear`, and `max`, while a custom `useData` hook fetches CSV data from a GitHub repository. The SVG is rendered via React components (`AxisBottom`, `AxisLeft`, `Marks`).

Pperamranji
93% match