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)

f4e2b4b014d3427db727dd114b609a91

Fork of React + D3 Viz Starter

0 stars0🌍 Public
GGrigoris Katrakazas
Last edited May 24, 2023
Created on May 24, 2023

This example presents a minimal starting point for building React + D3 visualizations. It shows a blank SVG canvas with distinct gray outer and inner rectangles, visually exposing the chart's margins and plot area boundaries. The code uses React's component model and D3 v6, loaded via CDN, with a `VizContainer` component that abstracts SVG and group elements. The `showMargins` prop controls whether the margin rectangles render, and the main `App` component defines the canvas dimensions and margin constants.

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