Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of ICE-6: Rendering Marks and Channels with React & D3

Public visualization

Fork of ICE-6: Rendering Marks and Channels with React & D3

0 stars0🌍 Public
SSalman Chowdhury
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, using an SVG rendering approach. The chart uses a categorical color scale for the bars and labels each country along the y-axis, with population values on the x-axis. The code imports and uses React components such as `useState` and `useEffect`, and leverages D3 functions including `csv`, `scaleBand`, `scaleLinear`, and `max`. The data is loaded from a GitHub Gist CSV file, and the chart is rendered entirely through SVG elements created in a React component.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed