Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
Vvenkataravitarunelisetty@my.unt.edu
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Hello VizHub

This bar chart displays the 2020 population for 30 countries, sorted along a linear scale, with country names on the y-axis. Built with React and D3 v5, it creates an SVG using `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. The data comes from a CSV file loaded with `d3.csv`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded from a CSV file via `d3.csv`, and each bar’s value is formatted using D3’s `format` function, with tooltips showing the abbreviated population.

Vvenkatamanikantavaddi@my.unt.edu
95% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted alphabetically along the vertical axis with horizontal bar lengths representing population values in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data loads asynchronously from a GitHub-hosted CSV using `d3.csv`, with axis ticks formatted using `d3.format` and a hover tooltip provided by SVG `<title>` elements.

AArunVurukonda@my.unt.edu
94% match
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
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 population of 30 countries, ranked vertically with horizontal bars extending to represent population size. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric population axis, with a zero baseline. The data is loaded from a CSV file and formatted using `d3.format` to abbreviate large numbers. SVG rectangles render the bars, with tooltips showing exact population values on hover.

YYeruva Snehith Reddy
94% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a vertical band scale. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with SVG rectangles drawn by the `Marks` component. The data is loaded asynchronously from a CSV file using `d3.csv`, and the population values are formatted in billions using D3’s `format` function. Tooltips reveal the exact population value for each bar on hover.

Cchandrikachowdary867@gmail.com
94% match
Loading thumbnail…

Activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name on the y-axis and population on the x-axis. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` render tick marks and labels. Data is loaded via `d3.csv` from a GitHub gist, with population values converted from the raw CSV. SVG rectangles represent each country, with hover tooltips showing formatted population values in billions.

Mmeenam1106@gmail.com
94% match
Loading thumbnail…

activity 6_Task 1

This visualization displays a horizontal bar chart of population data for 30 countries in 2020, sourced from a CSV file. Bars are rendered as SVG rectangles within a React component, with D3 v5 handling scales and tick marks. The chart uses a band scale for the categorical y-axis and a linear scale for the numeric x-axis, with formatted tick labels converting values to billions. Hovering over a bar reveals its exact population via a tooltip.

Ttarun.chintada46@gmail.com
94% match