Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React + D3 Viz Starter

Public visualization

Fork of React + D3 Viz Starter

0 stars0🌍 Public
CChaBoiYungMoney
Last edited Apr 7, 2022
Created on Apr 7, 2022

This example demonstrates a minimal React + D3 visualization scaffold, showing an empty SVG canvas with a gray outer rectangle and light gray inner rectangle to visualize the margin convention. The code uses React 16.13.1, ReactDOM, and d3.v6 loaded via CDN, with a reusable `VizContainer` component that abstracts SVG/group elements and follows the margin pattern. Rendering uses SVG elements created in JSX, with margins displayed via a `showMargins` prop that can be removed for production use.

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

Comments

Sign in to join the discussion.

MIT Licensed