Lori Labrie

@llabrie·3 public vizzes

Fork of Smiley Face Part II

This example displays a yellow smiley face that fills the entire browser window, centered dynamically based on the viewport dimensions. It uses React to render SVG circles for the face and eyes, while a D3 arc generator creates the mouth path with specified inner and outer radii and angle constraints. The D3 v7 library provides the arc function, and React 16.9 manages the component structure. The face scales responsively to window size, with the head radius calculated from the window height and the eyes positioned at fixed offsets.

Jul 9, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let's Make a Face Part I” shows a simple smiley face with a yellow circular head, two black eye circles, and no mouth yet. The SVG rendering approach uses three `<circle>` elements inside a fixed 960×500 viewport, with the head centered at (480, 250) and a 245-pixel radius. Stroke styling creates the black outline, while the eyes are positioned symmetrically around the center. The code relies on raw SVG markup in an `index.html` file, with a hidden body to remove page margins.

Jul 3, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and a mouth built from an arc path. The animation, driven by D3.js's `transition` method, shifts the eyebrows up and down over a two-second cycle. The face is constructed using SVG primitives—`circle`, `rect`, and `path`—positioned via `attr` transforms within a nested `g` group, with the `arc` generator defining the mouth's shape.

Jul 3, 2021