Al Wonder

@alyiwonder·4 public vizzes

Fork of Fork of Fork of Smiley Face Part 4

A grid of eighteen randomly generated smiley faces shows how small variations in facial feature parameters create distinct yet similar characters. Each face combines yellow circular backgrounds with black strokes, offset eyes, and a mouth drawn using a d3.arc-generated path. The React components—Face, Eyes, FaceBackground, and Mouth—compose the SVG, with each face’s dimensions and positions derived from Math.random() calls. The code leverages React 17 for UI structure, d3.v7 for arc geometry, and renders through a single SVG container centered within a full-viewport page.

Jan 2, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part 3

This graphic shows a classic smiley face built with yellow and black SVG shapes. The face consists of a large yellow circle for the head, two black circles for eyes, and a black arc for the mouth, all centered on a 960 by 500 canvas. The code uses React to render the SVG elements and d3.arc to generate the mouth’s path. Position and radius constants define all geometry, while the D3 arc utility calculates the curved mouth shape between specified angles.

Jan 2, 2022

Loading thumbnail…

Fork of Smiley Face Part 2

This example demonstrates a smiling face constructed from basic SVG shapes using React and D3. The visualization shows a yellow circle with a black stroke, two black eyes positioned symmetrically, and a curved mouth drawn as an arc. The React component defines the layout with specific dimensions and offsets for each facial element, while the `d3.arc()` API generates the mouth’s path data with defined inner and outer radii and angular start and end values. All shapes render within a single SVG container, with the group translated to center the face on the canvas.

Jan 2, 2022

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face of a smiley, and two smaller black circles represent the eyes. The face is centered within a 960 by 500 pixel SVG canvas, with the head’s radius calculated to fit within the canvas height and stroke width. The composition is static and minimal, using only three SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The markup is authored directly in `index.html`, with no external libraries or JavaScript beyond the SVG rendering.

Jan 2, 2022