Skip to main content
Log in
C

cajunatr

@cajunatr·4 public vizzes

Loading thumbnail…

I look at all the lonely people

The visualization shows a grid of eighteen identical yellow smiley faces, each with randomly varied stroke widths, eye positions, eye radii, and mouth sizes, creating subtle differences across the collection. Built with React and rendered as SVG, the components—BackgroundCircle, Eyes, Mouth, and FaceContainer—are composed to draw each face, while D3's `arc` function generates the mouth path. Random values for facial features are assigned via `Math.random` within the `App` component for each face.

Feb 7, 2022
Loading thumbnail…

Fork of Fork of Smiley Face PT 2

This visualization displays a grid of randomly generated smiley faces rendered as SVG elements in React. Each face uses D3’s `arc` API to draw a mouth, with variations in stroke width, eye position, eye radius, and mouth dimensions produced by successive calls to `Math.random`. The `FaceContainer` component sets the SVG coordinate system, while the `BackgroundCircle`, `Eyes`, and `Mouth` components are composed per instance. React renders each face independently, creating a mosaic of slightly different expressions.

Feb 7, 2022
Loading thumbnail…

Fork of Smiley Face PT 1

A yellow SVG smiley face is drawn inside a React component, centered on a 960×500 canvas. Missing its mouth, the face shows two black eyes and uses D3’s `arc()` generator to define a semicircular mouth path, though the path renders without a fill or stroke. The face is built with basic SVG primitives, including a yellow circle for the head and black circles for eyes, all positioned relative to a central translation. D3 v7 provides the arc shape, while React 17 manages the DOM rendering.

Feb 4, 2022
Loading thumbnail…

Smiley Face PT 1

A yellow circle with a thick black stroke occupies the center of an SVG canvas, while two smaller black circles sit inside it near the upper edge. The larger shape hints at a face, but the missing mouth leaves the image incomplete. The code uses plain SVG elements—`circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—rendered directly in the browser through inline markup. No data source or JavaScript library is involved; the visual is static and hand-coded.

Feb 3, 2022