Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React + D3 Viz Starter

Public visualization

Viewing a saved revision (read-only)

c5f576d6528e4d11bc8a60e0fa520a7d

Fork of React + D3 Viz Starter

0 stars0🌍 Public
BBen Luginbuhl
Last edited May 15, 2023
Created on May 15, 2023

This visualization gallery example presents a blank React and D3 starter template. It demonstrates a reusable `VizContainer` component that abstracts SVG and group elements, following the standard margin convention. The component accepts width, height, and margin properties, and can optionally display margin rectangles for debugging. The code uses `ReactDOM.render` to mount the app and defines a 960x500 SVG canvas with 30-pixel margins, rendering the container with a gray outer rectangle and lighter inner plotting area.

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