Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React + D3 Viz Starter my copy

Public visualization

Viewing a saved revision (read-only)

8bd5b296e25f48cf8e200f81055c1933

Fork of React + D3 Viz Starter my copy

0 stars0🌍 Public
Ddreidrachen
Last edited Mar 9, 2021
Created on Mar 9, 2021

This example shows a blank visualization scaffold created with React and D3 v6, rendered as SVG. The reusable `VizContainer` component abstracts SVG and group elements while following the margin convention, displaying gray outer and inner rectangles to visualize the layout boundaries. The code uses React 16 and ReactDOM to render the component, with dimensions and margins defined as constants. The `showMargins` prop toggles the debug rectangles, and the inner group is translated by the margin values to position content correctly.

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