workrit

@workrit·2 public vizzes

Fork of Fork of Smiley Face Part VI

A grid of randomly generated smiley faces fills the viewport, each face varying in stroke width, eye position, eye radius, mouth width, and mouth radius. The visualization uses React components to compose the face from separate `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` elements, with the `Mouth` built using `d3.arc()`. Each face is rendered as an SVG via a `FaceContainer`, and the grid is created by mapping over an array from `d3.range()`.

Jun 14, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces appears, each with unique eye positions, radii, and mouth arcs. The example demonstrates a React component-based approach where D3's arc generator creates mouth paths, while SVG circles form the eyes and background. The code leverages React's component composition and ES6 modules, with d3.range generating the grid and Math.random() driving each face's distinctive proportions.

Jun 14, 2022