Skip to main content
SimilarExport ZIP
100%

Activity6_task1

✓ Published0🌍 Public
Nneerajreddyaluka@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Activity 7

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, drawn with SVG in a React component. The chart uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, with formatted tick labels via `d3.format`. The data is loaded asynchronously from a CSV using `d3.csv` and rendered through a custom `Marks` component that creates SVG rectangles with tooltips. The visualization demonstrates combining D3’s data-joining and scales with React’s component structure.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020. It is built with React and renders to SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a remote CSV file using `d3.csv`, and each bar includes a native SVG `<title>` element for hover tooltips.

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

Activity6_task1

This example displays a horizontal bar chart of the top 30 countries by 2020 population. The visualization uses the D3 version 5 library with `scaleBand` and `scaleLinear` to map data from a CSV file to SVG rectangles. The React component defines axes with `AxisBottom` and `AxisLeft`, formatting tick labels from scientific notation to billions. Each bar includes a tooltip showing the population value, with data loaded asynchronously via a custom `useData` hook that fetches from a GitHub repository.

Nneerajreddyaluka@gmail.com
93% match
Loading thumbnail…

Activity 6-Task1

This example shows a horizontal bar chart ranking the populations of 30 countries for 2020, with each bar’s length encoding the population value and a text label for the country name. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a remote CSV via `useData` and `d3.csv`, with population values multiplied by 1000. Axes are rendered as SVG groups, and bars include a native `<title>` tooltip showing the formatted population value.

Ppslharika@gmail.com
93% match
Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart ranking the 2020 populations of 30 countries. The visualization uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, rendering the bars as SVG `<rect>` elements. It loads CSV data from a GitHub repository and formats axis tick labels with `d3.format`. The components are built with React, while static axes and marks are defined in separate ES6 modules. A native SVG `<title>` element provides tooltips on hover.

Hhemanthmaddila13@gmail.com
93% match
Loading thumbnail…

Activity 8 - Task 1

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, with the largest values extending farthest to the right. Built with React and rendered as SVG, it loads data from a CSV file using the `d3.csv` parser and uses D3 scales (`d3.scaleBand` and `d3.scaleLinear`) to map countries and population counts to positions. Custom axis components draw tick marks and labels, and tooltips formatted with `d3.format` appear on hover over each bar.

SSamir Tarda
93% match
Loading thumbnail…

Activity_6 task 1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom React components render the axes and marks as SVG rectangles. Population data comes from an external CSV file, formatted using D3’s `format` function to display values in billions. Hovering over any bar reveals its exact value through a native SVG `<title>` tooltip.

HHarinathChakali33@gmail.com
93% match
Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart comparing 2020 population figures for 30 countries. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded asynchronously from a CSV file via d3.csv, and population values are formatted using d3.format with a custom tick formatter that converts gigabytes to billions. The chart includes axes generated through custom React components and interactive tooltips using SVG title elements.

KKhushi Desai
93% match
Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with bars sorted by population. It renders as an SVG using React and D3 v5, loading data from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with tooltips formatted using `d3.format`. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the SVG elements.

NNagalakshmi Thota
93% match