Jarrod

@jarrodscott·5 public vizzes

Smiley Face Part IV

This example shows a smiley face built with React and D3, composed of a yellow circle, two black eyes, and a mouth drawn as an arc. The SVG elements are positioned using calculated constants for center coordinates, eye offsets, and radii. The mouth uses `d3.arc()` with specified inner and outer radii and start and end angles, rendered as a path. React renders the SVG structure, while D3 provides the arc generator. The face is centered within a 960×500 viewport, with a stroke applied to the outer circle.

Aug 14, 2021

Loading thumbnail…

Tweak Smiley Face from Part III

This example renders a smiley face using React and D3 v7, drawing circles for the head, eyes, and irises, and an arc for the mouth. Eyebrows are added as line elements, with stroke widths and positions computed relative to a central transform. The visualization is static, built with SVG inside a React component, and uses D3’s `arc()` generator to define the mouth shape. The code defines geometry constants for offsets and radii, showcasing a compositional approach to vector graphics.

Aug 13, 2021

Loading thumbnail…

Smiley Face Part III

A yellow smiley face is drawn using SVG, with a circular head, two black eyes, and a mouth arc. The visualization uses React to render the SVG elements and D3’s `arc()` generator from `d3` v7 to compute the mouth’s path. The head’s radius is derived from the canvas height and stroke width, while eye and mouth positions are set as offsets from the center. All dimensions and offsets are constant values.

Aug 12, 2021

Loading thumbnail…

Smiley Face Part II

This example shows a simple smiley face made of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes. The layout is calculated from fixed constants for the canvas size, center position, stroke width, and eye offsets. Using React and ReactDOM, the code renders the SVG directly, with the head circle’s radius derived from the canvas height and stroke width, and the eyes positioned symmetrically around the center.

Aug 12, 2021

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline and two smaller black circles for eyes forms a smiley face, rendered as a static SVG. The face is centered on a 960-by-500 canvas, with the main circle at (480, 250) and a radius of 245, while the eyes are placed at (350, 180) and (600, 180), each with a radius of 50. The code uses raw SVG elements—`circle`, `fill`, `stroke`, and `stroke-width`—without any external libraries, and the markup is embedded directly in an HTML page.

Aug 12, 2021