hhophan

@hhophan·2 public vizzes

Let's Make a Face Part I

Ten randomly generated cartoon faces fill the screen, each a yellow circle with two eyes and a curved mouth. The example shows how to compose reusable SVG components in React and D3 to build a static visual. React renders each face from modular parts like `BackgroundCircle`, `Eyes`, and `Mouth`, while D3’s `arc` generates the mouth path. Random values for eye and mouth size give each face a unique expression.

Aug 24, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered as an SVG scales to fill the browser window, with its radius and position computed from the viewport dimensions. The face uses React’s declarative component structure, with eye and mouth offsets defined as constants and applied via SVG `<circle>` elements within a transformed group. The example leverages React 16.9 and ReactDOM to mount the component, while the static geometry updates responsively to the window size.

Aug 22, 2022