Skip to main content
SimilarExport ZIP
100%

Task8_task1

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

This visualization shows the population of countries in 2020 as horizontal bars, sorted from largest to smallest, with a linear x-axis scaled to the maximum population value and a band scale for country names. The chart is built with React and D3 v5, using `scaleBand`, `scaleLinear`, and `max` from the D3 API, and renders SVG rectangles for each bar. Population values are read from a CSV file, converted from strings to numbers, and formatted with `format('.2s')` to display values in billions. The data consists of the first 30 rows of the source dataset.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task 8_task 1

This visualization displays the populations of 30 countries in 2020 as horizontal bars, ranked by country name along the vertical axis. The bars use a light green fill, with blue axis ticks and gray labels, and a title reading “POPULATION-2020” labels the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data, `csv` to load the dataset from GitHub, and renders the chart as SVG. Hovering over a bar shows a tooltip with the population value formatted using D3’s `format` function.

Mmulyasuji999@gmail.com
94% match
Loading thumbnail…

Task8_1

This horizontal bar chart displays the population of countries for the year 2020, using data loaded from a CSV file via D3's `csv` function. The visualization uses React to render SVG elements, with D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Each bar is a `<rect>` with a `<title>` element for tooltips, and the axes are custom components that generate tick marks and labels. The chart specifically formats population values in billions with the `siFormat` function, and the left axis lists country names.

LLakshmi Keerthi
93% match
Loading thumbnail…

Task8_Q2

This visualization shows a horizontal bar chart of the 2010 population figures for 20 countries, ordered by country name. Using React and D3 v5, the chart loads CSV data from a GitHub source, then renders SVG rectangles scaled by population. The code employs D3's scaleBand and scaleLinear for axis mapping, while custom AxisBottom and AxisLeft components handle tick marks and labels, with population values formatted using D3's format function and tooltips via SVG title elements.

LLakshmi Keerthi
92% match
Loading thumbnail…

Activity6_Task1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart, with bars sorted by country name and lengths proportional to population. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders bars as SVG `<rect>` elements. The data is fetched from a CSV via `d3.csv`, with population values converted from thousands. Tooltips show the exact population values, and axis labels are formatted using `d3.format` with 'G' replaced by 'B' for billions.

Ttejaswiteju9811@gmail.com
92% match
Loading thumbnail…

Activity6_Task1

This visualization displays the 2020 population figures for 30 countries using a horizontal bar chart. The bars are rendered as SVG rectangles, with each country positioned along the y-axis and bar length proportional to population size along the x-axis. The code uses React components and D3 v5 APIs including `scaleBand`, `scaleLinear`, `max`, and `format` (with `.2s` for SI-prefixed tick labels). Data is loaded asynchronously from a remote CSV file using `d3.csv`, and axes are constructed via custom React components for bottom and left alignment.

SSai Praveen Lokavarapu
92% 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
91% match
Loading thumbnail…

Activity 6_Task 1

This visualization displays the populations of 30 countries for the year 2020 as a horizontal bar chart, with each bar’s length proportional to its population value. The chart is rendered as an SVG using React components, with D3 v5’s `scaleBand` and `scaleLinear` handling the y-axis categories and x-axis scaling respectively. Population values are formatted with D3’s `format('.2s')` to abbreviate large numbers, converting gigabytes to billions for tick labels. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axis ticks and bars are styled with custom CSS classes.

Nneerajreddyaluka@gmail.com
91% match
Loading thumbnail…

Task8_Task(1)

This horizontal bar chart displays 2020 population estimates for 30 countries, sorted alphabetically by country name with bars extending left-to-right proportional to population values. The visualization uses React for component structure and D3 v5 for scales, axes, and data parsing, with SVG rectangles representing each country’s population in millions. Data loads from a GitHub CSV file, formatting large tick labels with D3’s `format('.2s')` to abbreviate billions as “B”. Tooltips show precise population values via SVG `<title>` elements, while blue axis lines and light-green bars provide visual clarity.

Jjyothirmai318@gmail.com
91% match