Skip to main content
Log in
C

charismooo

@charismooo·4 public vizzes

Loading thumbnail…

Smiley Face

Eighteen randomly generated smiley faces fill the viewport, each composed of a colored circle, elliptical eyes, and an arc-based mouth. The faces vary in face color, stroke thickness, eye position and tilt, and smile curvature, creating a playful grid of distinct expressions. Built with React components and D3 v5, the code uses D3’s `arc` generator for the mouth and `range` to produce the array of faces. All geometry is rendered as SVG, with random parameters scaled relative to a base size.

Apr 28, 2020
Loading thumbnail…

Smiley Face

Eighteen randomly generated smiley faces fill the viewport, each composed of a colored circle, elliptical eyes, and an arc-based mouth. The faces vary in face color, stroke thickness, eye position and tilt, and smile curvature, creating a playful grid of distinct expressions. Built with React components and D3 v5, the code uses D3’s `arc` generator for the mouth and `range` to produce the array of faces. All geometry is rendered as SVG, with random parameters scaled relative to a base size.

Apr 28, 2020
Loading thumbnail…

Smiley Face

Eighteen randomly generated smiley faces fill the screen, each a variation of the classic icon. The faces differ in color, stroke width, eye position and tilt, and mouth shape, showcasing the output of modular components built with React and D3 v5. The visualization is rendered as SVG, with the `Face`, `EmptyFace`, `Eyes`, and `Mouth` components taking numeric parameters to compute geometry. The code uses D3’s `arc` for the mouth path and `range` for generating the array of faces, all composed within a React app.

Apr 28, 2020
Loading thumbnail…

Smiley Face

The Smiley Face example generates a grid of 18 randomly configured smiley faces using React and D3 v5. Each face is composed of SVG shapes including a circle for the head, ellipses for eyes, and a D3 arc path for the mouth. The code uses `range` from D3 to create the array of faces and `arc` to generate the mouth path, with randomized parameters controlling eye size, tilt, stroke width, and smile intensity. The fully parametrized `Smiley` component demonstrates how React components can integrate with D3's geometric functions to create dynamic visual variations.

Apr 27, 2020