Skip to main content
100%

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

✓ Published0🌍 Public
Uubl2
Last edited Mar 10, 2022
Created on Mar 1, 2022
Forked from HTML Starter

This example shows a bar chart of the top 10 countries by GDP per capita, using green rounded rectangles to encode values. Data is loaded from a CSV via d3.csv and sorted by slicing the first ten rows. The visualization uses React hooks (useState, useEffect) to manage state, while D3 scales (scaleBand, scaleLinear) and SVG elements are rendered declaratively. Axis ticks and grid lines are generated manually using xScale.ticks() and DOM elements, without axis helper components.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes