Skip to main content
SimilarExport ZIP
100%

Activity6_Task1

✓ Published0🌍 Public
Hharsha13638@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays 2020 population figures for 30 countries, ordered by country name, using a green fill for each bar. Built with React and D3 v5, the visualization maps population values to bar lengths via a linear scale and country names to vertical bands via a band scale. The code uses `scaleBand`, `scaleLinear`, and `format` from D3, rendering all elements as SVG. Hovering reveals the population value through a native `<title>` tooltip, and the data is loaded from a remote CSV file using D3's `csv` function.

Mmaheshsachin1234@gmail.com
96% match
Loading thumbnail…

Activity6-Task1

This horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to vertical bands and population values to bar widths, rendered as SVG rectangles. Data is loaded from a remote CSV using `d3.csv`, and tooltips show formatted population values via a `d3.format` si-prefix. The axes are drawn with D3 ticks, with custom bottom and left axis components.

Mmeenam1106@gmail.com
95% 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_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
95% match
Loading thumbnail…

Activity8_Task-1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, sorted alphabetically by country name. The chart uses a green fill for each bar and displays a tooltip with the population value formatted in a compact, human-readable scale (e.g., "1.2B") on hover. Rendered as an SVG via React, the visualization employs D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw axes and rectangles. Data is fetched asynchronously from a CSV file using D3’s `csv` loader, with the population converted from a string to a numeric value before being plotted.

HHarika Metta
95% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

SSahithi.R
95% match
Loading thumbnail…

Activity_6Task_1

This example shows a horizontal bar chart of the populations of 30 countries in 2020, ordered by country name along the y-axis. Each bar’s length encodes the population value, with an axis label reading “POPULATION-2020” and formatted tick values using D3’s `format` function to abbreviate billions as “B”. The visualization uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a remote CSV file using `d3.csv` in the custom `useData` hook, and countries are sliced to the first 30 rows.

AAbrarb702@gmail.com
95% match