Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
JJaiyaGhanta@my.unt.edu
Last edited Oct 17, 2024
Created on Oct 17, 2024
Forked from Hello VizHub

This horizontal bar chart displays population figures for 30 countries in 2020, using a green rect for each country with a native SVG tooltip showing the formatted value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom` and `AxisLeft` components to render ticks. Population data is loaded from a remote CSV via `d3.csv`, with values multiplied by 1000 and formatted using `d3.format`. The chart includes a labeled population axis and blue tick lines.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Kkaringusathwika@gmail.com
95% match
Loading thumbnail…

activity 6_Task 1

This chart displays the population of 30 countries in 2020 using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG rectangles as marks with native tooltips. Data is loaded asynchronously from a CSV hosted on GitHub via `d3.csv` (not `d3.forceSimulation` or other graph APIs), and population values are preprocessed by multiplying the year-2020 column by 1000. The axes are custom components (`AxisBottom` and `AxisLeft`) using D3 ticks and formatting with `format('.2s')` to display values in billions.

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

Activity6_Task 1

A horizontal bar chart displays 2020 population estimates for 30 countries, ranked by country name on the y-axis and population on the x-axis. The visualization uses SVG rendering within a React component, with D3 v5 scale functions (`scaleBand`, `scaleLinear`) for positioning, and custom `AxisBottom` and `AxisLeft` components for ticks. Data loads asynchronously from a CSV file via `d3.csv` and formats axis labels using `d3.format`. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

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

activity 6_Task 1

This bar chart displays the populations of 30 countries for 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, implementing custom `AxisBottom`, `AxisLeft`, and `Marks` components to render SVG elements. Population data is loaded via d3.csv, with values formatted using d3.format. Bars appear in green (#90ee90), while axes and labels use muted grays. The chart includes hover tooltips showing formatted population values, and the x-axis label indicates "POPULATION-2020".

Mmohanalaharic@gmail.com
94% match
Loading thumbnail…

activity 6_Task1

This bar chart displays the 2020 population for 30 countries, using horizontal bars where length encodes the population value. The visualization is rendered as an SVG with React, using D3 version 5's `scaleBand` for the categorical y-axis of country names and `scaleLinear` for the numeric x-axis. Population data is loaded from a CSV file hosted on GitHub via D3's `csv` function. The axes are custom components (`AxisBottom`, `AxisLeft`), while the bars themselves are `rect` elements created in the `Marks` component.

GGanesh Gundekarla
94% match
Loading thumbnail…

activity6_task 1

This example shows a horizontal bar chart of population figures for 30 countries in 2020, with a green bar for each country and a blue axis grid. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to positions. The bar lengths encode the population data, which is loaded from a remote CSV via D3’s `csv` method, and a native SVG `<title>` element provides tooltips on hover. Axis labels are formatted using D3’s `format` helper to abbreviate large numbers.

Ssaibharath7thota@gmail.com
94% 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
94% match