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
Aamiratariq336@gmail.com
Last edited Apr 5, 2024
Created on Apr 5, 2024

This example shows three identical smiley faces rendered side by side using React components that compose D3-generated SVG shapes. The face is built from separate React components for the background circle, eyes, and mouth, with the mouth created using the `d3.arc()` API. All elements are drawn on an SVG canvas via a `FaceContainer` wrapper, which centers the face using a translation transform. The React app maps over an array to create three instances of the face, each with fixed dimensions and coordinates.

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