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
Jjon65
Last edited Feb 28, 2023
Created on Feb 28, 2023

This example demonstrates a minimal React and D3.js starter project for SVG visualizations. It shows a simple SVG canvas with a light gray background, a darker gray border, and a single red circle in the top-left corner. The code defines a reusable `VizContainer` component that handles the standard margin convention, translating the inner coordinate system and optionally displaying the margin boundaries. It uses CDN-loaded React, ReactDOM, and D3, with dimensions and margins set as variables, and renders the visualization through the `ReactDOM.render` API.

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