Skip to main content
100%

Fork of React + D3 Viz Starter

✓ Published0🌍 Public
CChristalL99
Last edited Dec 15, 2022
Created on Dec 15, 2022

This example demonstrates a blank visualization canvas built with React and D3 v6, using a reusable `VizContainer` component that applies the standard margin convention. The component renders an SVG with outer and inner rectangles to visualize the margins, which can be toggled by changing the `showMargins` prop. The code loads React, ReactDOM, and D3 from CDNs, and sets up width, height, and margin variables for future chart development. The actual visualization area remains empty, serving purely as a starter template for building custom React+D3 charts.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component 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

Similar vizzes