bonbonwee

@bonbonwee·5 public vizzes

Smiley Face Pt 6

A grid of 18 randomly generated smiley faces fills the viewport, each with varied stroke widths, eye offsets, eye radii, mouth widths, and mouth radii. The faces are rendered as SVG elements using React components, with the mouth path created via d3’s `arc` generator and the collection generated using d3’s `range`. ReactDOM mounts the component tree, which references d3.v6 for arc generation.

Apr 13, 2021

Loading thumbnail…

Smiley Face Pt 5

A reusable React component draws a gold smiley face onto an SVG canvas, centered over a dark background. The figure combines a circular background, two black eyes, and a mouth arc generated with the D3 `arc` API. React manages component structure and prop-driven styling, including offsets, radii, and stroke widths, while all geometry is positioned via an SVG `<g>` transform. The final composition results from nested React components for the face’s distinct parts.

Apr 13, 2021

Loading thumbnail…

Smiley Face Pt 4

This example shows a gold smiley face centered on an SVG canvas. The face has a black outline, two eyes, and an arc-shaped mouth that forms a literal half-circle smile. Built with React and D3, the visualization uses the `arc()` API to generate the mouth path, while the background circle and eyes are drawn as React SVG elements. The face is positioned via a group translation to the canvas center, with all radii and offsets hardcoded.

Apr 12, 2021

Loading thumbnail…

Smiley Face Pt 1-2 Assignment

A stylized smiley face rendered in SVG using React and D3’s `arc` generator for the mouth, with two animated circles for eyes that pulse via `<animate>` elements. The face fills a dark grey circle with a black stroke, while the left eye is overlaid with a darkkhaki geometric pattern defined in SVG `<pattern>` and `<path>` elements. D3 v6 computes the mouth’s inner and outer arcs, and React handles the component structure and JSX state. The example uses fixed pixel dimensions and coordinates, with no external data source.

Apr 10, 2021

Loading thumbnail…

Smiley Face Pt 1-2

The visualization displays a static smiley face composed of a gold circle with a black outline, two black eye dots, and a curved mouth arc, centered on an SVG canvas. It uses React and D3.js’s `arc` function to generate the mouth path, positioning elements via SVG translations and fixed coordinates. The face is rendered with D3 v6 and React 17, with all shapes drawn using SVG primitives.

Apr 10, 2021