bnhalbach

@bnhalbach·2 public vizzes

Tweak a smiley face

This example generates a static smiley face centered on an SVG canvas, composed of simple shapes: a rounded orange rectangle, two black circles for eyes, and a pink mouth. The mouth and tongue are drawn as arc paths using D3’s `arc()` generator, which constructs the curved shapes with specified inner and outer radii and angular ranges. Rendered with React and D3 v7, the visualization demonstrates how to combine basic geometric drawing with D3’s path generation for idiomatic SVG styling.

Sep 2, 2021

Loading thumbnail…

Make a smiley face part 1

A large orange circle forms the base of a smiley face, drawn with a black stroke and positioned at the center of an SVG canvas. Two small black circles serve as eyes, placed symmetrically above the center, while a semi-circular arc, generated using the D3 `arc` generator, creates the mouth. The example demonstrates combining React components with D3’s shape APIs, rendering all elements as SVG within a React `App` component.

Sep 2, 2021