Skip to main content
SimilarExport ZIP
100%

Activity 6_Task 2

✓ Published1🌍 Public
HHarshita Vairagade
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Activity 6_Task 2

This example displays the population of 20 countries as a horizontal bar chart, with green bars and blue tick marks on a white background. The horizontal axis is labeled "POPULATION-2020" and uses a formatted scale that abbreviates large numbers. It is built with React and D3 v5, using `scaleBand`, `scaleLinear`, `max`, `format`, and `csv` to load and process the data from a GitHub-hosted CSV file. The visualization is rendered as an SVG, with axes and marks defined as React components.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 2

This example displays the population of 20 countries as a horizontal bar chart, with green bars and blue tick marks on a white background. The horizontal axis is labeled "POPULATION-2020" and uses a formatted scale that abbreviates large numbers. It is built with React and D3 v5, using `scaleBand`, `scaleLinear`, `max`, `format`, and `csv` to load and process the data from a GitHub-hosted CSV file. The visualization is rendered as an SVG, with axes and marks defined as React components.

HHarshita Vairagade
100% match
Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart ranking the populations of 20 countries in 2020, with a green bar for each nation and axis labels formatted in billions. It uses React components to render SVG marks via `scaleBand` and `scaleLinear`, pulling data from a CSV file loaded with `d3.csv`. The chart includes a custom axis, a bottom label, and a tooltip showing the population value.

HHarshita Vairagade
94% match
Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, with each bar’s length representing population size and country names on the y-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and process data from a GitHub-hosted CSV. SVG rendering is driven by reusable React components for axes and marks, with axis labels and green bars styled via CSS. Tooltips appear on hover, showing the population value in a compact format (e.g., “1.2B”).

SSiva Kishore Reddy
94% match
Loading thumbnail…

Activity6_Task1.2

A horizontal bar chart displays the population of twenty countries in 2010, ranked from top to bottom. Green bars extend from the left axis to the right, with a blue tick line marking the bottom axis. Built with React and D3 v5, the visualization uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and loads CSV data from a GitHub repository. Tooltips reveal the population value on hover, formatted with abbreviations like "B" for billions.

Ss.harshinisai01@gmail.com
93% match
Loading thumbnail…

Activity 6 Task 1

This example visualizes the 2020 population for 30 countries as a horizontal bar chart using SVG rendering in a React application. The bars are colored green, with blue tick lines and gray labels for readability. The chart loads data from a CSV file, computes population values by multiplying the 2020 figures by 1000, and applies d3's `scaleBand` and `scaleLinear` for positioning and scaling. D3 v5.11.0 is used for data parsing (`csv`), formatting (`format`), and scales, while React 16.9.0 handles the component rendering, with tooltips displaying formatted population values (e.g., in billions).

Jjaswanthreddy2000@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This example shows the population of 20 countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning and a custom `tooltipFormat` that abbreviates large numbers. Data is loaded as CSV using `d3.csv` and sliced to the first 20 rows, while axis ticks are generated with `xScale.ticks()` and labeled via the `format` API.

Rrakesh.kavuru@outlook.com
93% match
Loading thumbnail…

Activity 6_Task 1

This interactive bar chart displays the 2020 population figures for 30 countries, using horizontal bars to rank each nation along a linear scale. The visualization employs React to manage the SVG rendering, with D3 v5 handling data loading, scales, and axis generation through functions like `scaleBand` and `scaleLinear`. Population data is fetched from a CSV file and formatted using D3's `format` utility, converting values to billions for tooltips. The chart features blue tick lines, green bars, and a Poppins font, with the y-axis listing country names and the x-axis labeled “POPULATION-2020.”

Hharsha13638@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This visualization shows the 2020 population for 30 countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales from d3.scaleBand and d3.scaleLinear. Axes are custom components using d3 tick formatting, and the data is loaded from a CSV file via d3.csv with population values multiplied by 1000.

Hhkodiripaka15@gmail.com
92% match