Skip to main content
SimilarExport ZIP
100%

activity 6_Task 1

✓ Published0🌍 Public
CCodeNinja
Last edited Oct 18, 2024
Created on Oct 18, 2024
Forked from Activity 7

A horizontal bar chart displays the population of ten countries for the year 2000, using data loaded from a remote CSV via `d3.csv`. The React application builds an SVG with `scaleBand` for the country axis and `scaleLinear` for population values, rendering bars as SVG rectangles with tooltips. The chart includes formatted tick labels using `d3.format` and styled axes with the Poppins font.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the populations of ten countries in the year 2000, with country names on the y-axis and population values on the x-axis. The chart uses React components to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for scales and `format` for tick labels. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with each rectangle including a native SVG `<title>` element for tooltip display.

Hhemanthmaddila13@gmail.com
94% match
Loading thumbnail…

activity-6_Task 1

This horizontal bar chart displays the population of ten countries for the year 2020, drawn as SVG rectangles using React. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for axes and scales, with `format('.2s')` for tick labels. Data is loaded from a CSV file via D3’s `csv` function, then rendered with custom `AxisBottom`, `AxisLeft`, and `Marks` components.

1180030215cse@gmail.com
93% match
Loading thumbnail…

activity6_Task 1

This example displays a horizontal bar chart of the 2020 population for 30 countries, sorted alphabetically. The chart uses an SVG canvas created with React and D3 v5 APIs, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is fetched from a remote CSV file using D3’s `csv` method. Each bar includes a tooltip showing the formatted population value; x-axis tick labels are formatted with `d3.format`.

CCodeNinja
93% match
Loading thumbnail…

activity6_task1.2

This example shows a horizontal bar chart of 2010 population data for 20 countries, with country names on the y-axis and population scaled along the x-axis. The visualization is rendered as an SVG using React components and D3 v5 scales, including `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis. Data is loaded from a remote CSV file using the `csv` function from D3, with population values multiplied by one thousand. Axes, tick lines, and bar marks are built from custom React components, with title tooltips formatting population values using D3’s `format` function.

CCodeNinja
93% match
Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart of the 2010 populations for 20 countries, sorted by country name and rendered as SVG in a React application. The chart uses D3 v5 scales—`scaleBand` for the y-axis and `scaleLinear` for the x-axis—with data loaded via `d3.csv` from a GitHub-hosted CSV file. Bars are drawn as `rect` elements with tooltips formatted using D3’s `format` function, while the `AxisBottom` and `AxisLeft` components generate their respective tick marks and labels.

RRJVENKATESH789@GMAIL.COM
93% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. Built with React and D3 v5, it renders as an SVG and loads CSV data from a GitHub repository. The visualization uses `scaleBand` and `scaleLinear` for positioning, with axes generated by custom React components and D3’s `format` for abbreviated tick labels.

Cchinnivikramnunna@gmail.com
93% match
Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the populations of ten countries for the year 2000, loaded from a CSV file via a custom `useData` hook and `d3.csv`. React renders SVG bars whose widths are scaled by `d3.scaleLinear`, while countries are positioned with `d3.scaleBand`. Axis components generate ticks and labels using `d3.format` to abbreviate numbers. Hovering reveals native SVG tooltips with formatted values.

Rrahulsiddhartha123@outlook.com
92% match
Loading thumbnail…

Activity 6_Task 1.1

A horizontal bar chart displays population figures for ten countries using a dataset loaded from a GitHub-hosted CSV file. The visualization uses React components to render SVG elements, with D3 v5's `scaleBand` and `scaleLinear` handling the coordinate mappings. Axis components generate tick marks and labels, while a tooltip using the SVG `title` element shows the formatted population value for each bar. The chart is ordered alphabetically by country name, with axes styled through CSS classes.

Vvarunreddy.gudigopuram@gmail.com
92% match