Fork of React + D3 Viz Starter
✓ Published0🌍 Public
This starter example demonstrates a clean React and D3 visualization setup with a reusable `VizContainer` component that manages SVG structure and margin conventions. The container renders a gray outer rectangle and light gray inner rectangle to visually expose the margins, with all content translated into the inner group using D3’s margin convention. The code loads React 16, ReactDOM, and D3 v6 via CDN, and defines explicit width, height, and margin variables for layout control. A `showMargins` boolean prop toggles the visibility of these guide rectangles, which can be removed by deleting the prop.
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