Josipa Puljko

@jpuljko·3 public vizzes

Fork of Smiley Face Part VI

A grid of randomly generated smiley faces fills the screen, each face varying in stroke width, eye position and size, and mouth radius. Built with React components and D3, the example uses a modular structure where `FaceContainer` renders the SVG, while `BackgroundCircle`, `Eyes`, and `Mouth` define reusable parts. D3’s `arc` generator creates the mouth path, and the `range` function from D3 generates the 18-face array.

Jun 29, 2021

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a stylized smiley face rendered as an SVG graphic. A yellow circle forms the background, with two black eyes positioned symmetrically and a curved mouth drawn using an arc path. The visualization is built with React components, where each facial feature is a separate component (BackgroundCircle, Eyes, Mouth). D3’s `arc` API generates the mouth’s path, while React renders the SVG elements within a transformed coordinate system centered on the canvas.

Jun 29, 2021

Loading thumbnail…

Smiley Face Part I

A smiling face rendered as SVG with React and D3. The visualization uses D3’s `arc` generator to draw the mouth as a thick curved path, while eyes are positioned with fixed offsets and radii in a yellow circle outlined with a heavy black stroke. React manages the component structure, and D3 v7 provides the arc shape. The face is centered on a 960 by 500 canvas, with the mouth and eyes computed from hardcoded dimensions, producing a static, simple smiley illustration.

Jun 29, 2021