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)

052bf790d17a494789cbe0fd8d3e59ed

Fork of React + D3 Viz Starter

0 stars0🌍 Public
Rrhysg-ps
Last edited Mar 21, 2022
Created on Mar 21, 2022

This example demonstrates a minimal React and D3.js starter template for building SVG visualizations. It shows how to render an SVG canvas with a configurable margin layout and placeholder data structure containing four categorical values. The `VizContainer` component abstracts the SVG and group elements, following a margin convention that can be visually highlighted via a `showMargins` prop. The code uses ReactDOM for rendering, D3 v6 for data handling and selection, and references the ResponsiveWaffleHtml component from the @nivo/waffle library, though the actual chart is not rendered in the visible boilerplate output.

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