ICE-6: Rendering Marks and Channels with React & D3
✓ Published0🌍 Public
This visualization shows a horizontal bar chart comparing the acceleration capacity of 20 cars, rendered as SVG marks within a React application. The code uses React’s `useState` and `useEffect` hooks to asynchronously load CSV data from a GitHub gist via D3’s `csv` function, then maps it to a linear x-scale (`d3.scaleLinear`) and a band y-scale (`d3.scaleBand`) for car names. Custom tick marks and labels are drawn manually using D3’s `scaleBand` and `scaleLinear`, with blue gridlines and text elements, all within a single `<svg>` container managed by ReactDOM.
AI-generated descriptionA demonstration of how to start using D3 version 6.
MIT Licensed