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)

4ecd9514b8ce4eb19b5de0fd823f95ae

Fork of React + D3 Viz Starter

0 stars0🌍 Public
AAmAn VeRmA
Last edited Sep 23, 2022
Created on Sep 23, 2022

This example shows a blank React + D3 visualization starter template with visible margin guides. The `VizContainer` component renders an SVG with an outer gray rectangle and inner light-gray rectangle to display the margin convention, using the `margin`, `innerWidth`, and `innerHeight` variables. The code imports React and ReactDOM directly via `React.createElement` and uses D3 v6 from a CDN. The `showMargins` prop toggles the guide rectangles, which can be removed by setting it to `false`. No data or chart elements are currently rendered.

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