Skip to main content
100%

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

✓ Published0🌍 Public
TTejaswicmandava
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from D3 Starter

This example shows the top 15 movies by metascore as a horizontal bar chart, with each bar’s length encoding the numeric score and the movie title on the y-axis. The visualization uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks with `scaleBand` and `scaleLinear` for positions. Grid lines and tick labels are drawn manually from `xScale.ticks()`, while D3’s `max` and `format` handle scaling and number display. The code imports D3 v5 utilities like `select`, `axisLeft`, and `axisBottom` but does not use them in the final render.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes