ICE-6: Rendering Marks & Channels with "React & D3"
✓ Published0🌍 Public
This example visualizes the salary estimates for the top 10 data scientist job titles using horizontal bars rendered as SVG rectangles. The React component manages state with `useState` and `useEffect`, loading and parsing CSV data via `d3.csv` while the D3 scales (`d3.scaleBand`, `d3.scaleLinear`) compute bar positions. Each bar’s width maps to salary values, with rendered axis ticks and labels. D3 v5 handles the data loading and scaling, while React elements compose the final SVG output within an HTML page that loads both libraries from a CDN.
AI-generated descriptionBoilerplate code for a React + D3 visualization with:
- CDN links for React, ReactDOM, and D3
- Basic React boilerplate
- Variables for dimensions and margins
- A
VizContainercomponent that:- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the
showMargins={true} prop
MIT Licensed