dmpiq

@dmpiq·2 public vizzes

Start of a smiley

Three yellow circles form the start of a smiley face on a black-stroked yellow circular background, with two smaller solid black circles serving as eyes. The SVG rendering uses fixed coordinates and radius values: the face is centered at (480, 250) with a 245-pixel radius, while each eye is placed 130 pixels from the horizontal center at a y-coordinate of 180. The code directly sets circle positions and sizes through SVG attributes, with a 10-pixel black stroke applied only to the large face circle. No interactive or animated behavior is present.

Mar 1, 2021

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Mar 1, 2021