Peter Colella

@petercolella·2 public vizzes

Smiley Face Part 2

This example shows a yellow smiley face built from geometric shapes rendered in SVG. The face consists of a large circle for the head, two smaller circles for eyes, and a mouth drawn as an arc path. The code uses React to manage the component structure and D3’s `arc` generator to compute the mouth’s path, with fixed dimensions for the 960x500 viewport.

Jun 9, 2021

Loading thumbnail…

Smiley Face Part 1

This example uses React and D3 v6 to draw a smiley face in SVG. It shows a yellow circle with black stroke for the face, two filled circles for eyes, and an arc path for the mouth. The code computes geometry such as center coordinates, eye offsets, and mouth radius, then passes these to D3’s `arc()` generator to create the mouth path. React renders the SVG elements declaratively, while D3 provides the arc calculation.

Jun 9, 2021