Activity6_task1

100%

Activity6_task1

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This horizontal bar chart displays the 2020 populations of 30 countries, with bars sorted by country name along the y-axis and population values along the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub repository, then renders SVG rectangles with a light green fill. The x-axis uses a linear scale with custom tick formatting to abbreviate large numbers (e.g., 200M, 1.2B), while the y-axis employs a band scale to position the country labels. Axis labels are added via the AxisBottom and AxisLeft components.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. The visualization uses D3.js (v7) and renders through SVG. A linear scale maps population values to bar widths, while a band scale positions countries along the vertical axis. The code explicitly creates light green bars via `Marks.js` and formats the population labels in billions using `d3.format` within `AxisBottom.js`.

MMili Patel

95% match

Loading thumbnail…

activity6_task1

This horizontal bar chart displays the populations of the top 30 countries in 2020, sorted by country name. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis to position the light green bars. The data is loaded from a CSV file hosted on GitHub, with the population values formatted as billions (e.g., "1.2B") on the x-axis. Both axes include custom labels, with the x-axis labeled "POPULATION-2020" and the y-axis labeled "Countries".

Sshreshikaveerannagari@gmail.com

94% match

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 30 most populous countries in 2020, with bars representing population values and a tooltip showing formatted numbers on hover. The visualization loads CSV data from a GitHub-hosted dataset, processes the population values by removing commas, and sorts countries in descending order before capping at 30 entries. Built with D3 v6, it uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and custom `AxisBottom` and `AxisLeft` components to render the axes. The chart includes blue grid lines, light green bars, and a formatted x-axis label that converts billions to a readable format.

Pparmuriat@gmail.com

94% match

Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the populations of the top 30 countries in the year 2000, sorted by country name. The visualization uses D3.js version 7 to create an SVG bar chart with light green bars, a linear x-scale for population values, and a band y-scale for country names. The code imports data from a CSV file using d3.csv and constructs the chart with modular components for axes and marks. Axis labels are formatted using d3.format to display population values in billions.

MManojsai Bangaru

94% match

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of countries in 2020, sorted by country name, with the x-axis scaled linearly from zero to the maximum population value. The visualization uses D3 v7 to load CSV data, create a band scale for the y-axis and a linear scale for the x-axis, and render SVG rectangles. The bottom axis includes horizontal grid lines via tickSize, and the chart includes axis labels for both dimensions.

Kkblikitha22@gmail.com

94% match

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of the top 30 countries in 2020, using a linear scale for population values and a band scale for country names. Each bar is rendered as an SVG rectangle with a lightgreen fill, while the axes include formatted tick labels that abbreviate millions as "M" and billions as "B". The visualization loads data from a remote CSV file using `d3.csv`, and constructs the chart with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` within a 900x500 SVG canvas.

MMeghana Sadhu

93% match

Loading thumbnail…

Activity6_Task1

This is a horizontal bar chart displaying the 2020 populations of 30 countries, loaded from a CSV file and sorted from largest to smallest. The visualization is rendered as an SVG using React and D3 v5, with `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom `AxisBottom` and `AxisLeft` components for ticks. Green rectangles represent data values, with tooltips showing the formatted population in billions. The chart is part of a React app using `useData` to fetch and parse the data, with axes styled via CSS.

VVidya Lakshmi Chitturi

93% 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

93% match