Skip to main content
SimilarExport ZIP
100%

Activity6_Task1

✓ Published0🌍 Public
Ssanjanadadi19@gmail.com
Last edited Apr 4, 2024
Created on Apr 4, 2024
Forked from Hello VizHub

This chart displays the population of 30 countries in 2020 as horizontal bars, sorted by country name. It is built with React and D3 v5, using a linear x-scale for population values and a band y-scale for countries. The SVG rendering includes axis components and rectangular marks with tooltips, while CSV data is loaded asynchronously via the `useData` hook.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activty6_Task 1

This chart displays the population of 30 countries in 2020 as a horizontal bar chart, with bars extending from a shared left baseline and ordered by country name. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the `csv` function fetches the data from a remote URL. The code defines separate components for axes and marks, with the bottom axis formatted using D3's `format` to abbreviate large numbers (e.g., converting "G" to "B" for billions).

Ssriharshithaanugu5@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
95% 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
94% match
Loading thumbnail…

Activity 6_Task 1

This chart displays the 2020 population of 30 countries as a horizontal bar chart. Each bar’s length is proportional to population, with country names on the vertical axis and a formatted population scale on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Data is loaded from a remote CSV file using D3’s `csv` function.

MMannava Priyanka Chowdary
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted by country name along the vertical axis. The chart uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are formatted using D3’s `format` function, converting billions to a readable label. The data is loaded via `d3.csv` from a remote GitHub source, and each bar includes a tooltip showing the formatted population value.

PPothuguntla Pranitha
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries for the year 2020, ranked along the vertical axis. The chart uses a green horizontal bar for each country, with a tooltip showing the precise population value on hover. It loads data from a CSV file via D3's `csv` function, and constructs a band scale and linear scale for the axes. The React components render SVG elements for the axes and marks, while D3's `format` function converts large numbers into abbreviated strings.

Kkaringusathwika@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the population of 30 countries in 2020 as a horizontal bar chart. The React-based code uses D3 v5 to load CSV data, and employs `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. The SVG rendering includes custom axis components and rectangle marks, with tooltips showing formatted population values. Data originates from a GitHub-hosted CSV file, and the chart is rendered entirely with SVG elements.

SSowjanya Devupalli
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