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

Viewing a saved revision (read-only)

595f671e46cc4776bd2bc9d4485a022e

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

0 stars0🌍 Public
NNarayana
Last edited Aug 29, 2022
Created on Aug 29, 2022

This example displays a horizontal bar chart of the top 10 most populous countries, with bars sized by population for 2019. It renders SVG marks using React, with D3’s `scaleBand` and `scaleLinear` to map country names and population values to positions and sizes. The chart’s axes are drawn with D3’s `axisBottom` and `axisLeft`, while data is loaded via `d3.csv` from a provided URL. The visualization demonstrates how React components can declaratively structure SVG elements, with D3 handling scales and data formatting.

AI-generated description

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

See also React Starter.