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)

05c68b4264914f8999176755ee1e276e

Fork of React + D3 Viz Starter

0 stars0🌍 Public
HHanlinHu
Last edited Mar 7, 2022
Created on Mar 7, 2022

This example provides a minimal React + D3 starter template for building SVG visualizations. It renders a blank 960x500 SVG canvas with gray margin rectangles visible through the `VizContainer` component, which follows the D3 margin convention using explicit width, height, and margin objects. The code loads React 16, ReactDOM, and D3 v6 via CDN, then uses JSX to compose the SVG structure. The `showMargins` prop toggles the display of the outer and inner guide rectangles, demonstrating how to scaffold a chart before adding custom D3 visualizations.

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