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)

12d7cbe993d646959243754f7483953d

Fork of React + D3 Viz Starter

0 stars0🌍 Public
Hhiperborejac23
Last edited Sep 6, 2021
Created on Sep 6, 2021

A React and D3 v6 starter renders a simplified smiley face using scalable vector graphics (SVG). The yellow circle, eyes, and mouth are drawn via basic SVG shapes, with the mouth produced by the `d3.arc()` function. Fixed pixel dimensions position the face elements. A separate `VizContainer` component demonstrates the margin convention for plotting areas, though it is not used in this illustration. The code includes commented-out boilerplate showing how to integrate that container, and relies on CDN-loaded React and D3 libraries.

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