Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React + D3 Viz Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

88260537e0f7429dba6d04549eb6bbc1

Open

Fork of React + D3 Viz Starter

0 stars0🌍 Public
DDaniel Vanpelt
Last edited Jul 7, 2021
Created on Jul 7, 2021

A React and D3.js starter fork displays an empty SVG canvas. The visualization uses a reusable `VizContainer` component to abstract SVG and group elements while following standard margin conventions. The code integrates React 16 and D3 v6 via CDN links, with dimensions set to 960 by 500 pixels. The container renders gray rectangles to visualize the margin structure, which can be hidden by removing the `showMargins` prop. Currently, the example only demonstrates the boilerplate layout without any data or chart elements.

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