Skip to main content
100%

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

✓ Published0🌍 Public
HHarshavardhan
Last edited Mar 9, 2023
Created on Mar 8, 2023
Forked from HTML Starter

This example visualizes the top 15 movies by metascore as a horizontal bar chart, using the length of each bar to encode the score. The visualization is rendered as an SVG element, with axes and tick labels drawn manually using D3 functions like `scaleBand`, `scaleLinear`, and `max`. The code loads data from a CSV file via `d3.csv` and integrates D3’s scaling and tick-generation methods within React’s component structure, using `useState` and `useEffect` to manage the asynchronous data loading. The chart is built with React’s declarative syntax, producing SVG rectangles and text elements.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes