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)

b32ed48a08bd4337b0f67ff538f5572d

Fork of React + D3 Viz Starter

0 stars0🌍 Public
Aaniosindustries
Last edited Oct 23, 2021
Created on Oct 23, 2021

This example demonstrates a bare-bones starter template for combining React with D3.js. It shows a simple layout with gray and light-gray rectangles representing the SVG canvas and the inner plotting area, separated by visible margins. The code uses React’s `createElement` pattern and a reusable `VizContainer` component that abstracts standard margin conventions and renders an SVG `<g>` group. D3 v6 is loaded via CDN, and the setup uses ReactDOM to mount the visualization, with the margin rectangles toggled by a `showMargins` prop.

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