Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

91b98a5c67cb49ce8a80a24b5a4ad5e5

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

0 stars0🌍 Public
AAli Shah Solanki
Last edited Mar 12, 2023
Created on Mar 12, 2023
Forked from HTML Starter

This example shows alcohol consumption by country using a horizontal bar chart, with the top 25 countries sorted by liters consumed. The visualization is built with React and D3, where the D3 scales `scaleBand` and `scaleLinear` map country names and consumption values to screen positions. SVG rectangles render the bars, while D3's `axisLeft` and `axisBottom` utilities generate tick lines and labels. Data is loaded from a CSV file fetched via D3's `csv` function, and the entire chart is rendered inside a single SVG element managed by React's declarative markup.

AI-generated description

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

See also React Starter.