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)

98753af623a4459885a550cecfecc4f5

Fork of React + D3 Viz Starter

0 stars0🌍 Public
SSalman Chowdhury
Last edited Feb 28, 2022
Created on Feb 28, 2022

This example shows a bare-bones React and D3.js starter template that renders a blank SVG visualization area. The `VizContainer` component abstracts the SVG and group elements, implementing D3’s margin convention with configurable outer and inner rectangles in gray and light gray to visualize the layout. The code uses React 16, ReactDOM, and D3 v6 loaded via CDN, with fixed dimensions of 960×500 pixels. The optional `showMargins` prop toggles the display of these guide rectangles, which can be removed for production use by deleting the prop from the call.

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