Skip to main content
Log in
L

liunaiming

@liunaiming·6 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds an animated smiley face from basic SVG shapes, including a yellow circle, black eyes, an arc-based mouth, and eyebrow rectangles. The eyebrows move up and down repeatedly using chained `transition` and `duration` calls on the rectangle elements. The code imports `select` and `arc` from D3, appends shapes to an SVG canvas, and relies on D3 v5 for DOM manipulation and animation, with no external data source.

Jul 19, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, with eyebrows that move up and down over time. It shows fundamental DOM manipulation by selecting SVG elements and appending shapes like circles, rectangles, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and chained `transition.attr` calls to animate the eyebrow group’s vertical position. The face is drawn entirely with SVG, centered in a 960×500 viewport, and the animation runs continuously without external data.

Jul 19, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, with eyebrows that move up and down over time. It shows fundamental DOM manipulation by selecting SVG elements and appending shapes like circles, rectangles, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and chained `transition.attr` calls to animate the eyebrow group’s vertical position. The face is drawn entirely with SVG, centered in a 960×500 viewport, and the animation runs continuously without external data.

Jul 19, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build an animated smiley face in SVG, whose eyebrows lift and lower in a looping transition. It shows fundamental DOM manipulation by selecting an SVG element, appending grouped shapes, and binding attributes for the face’s circles, rectangles, and an arc-based mouth. The animation relies on chained `transition().duration()` calls to move the eyebrow group’s transform. Specific APIs include `select`, `append`, `attr`, and `arc` from D3 v5, with coordinates computed from hardcoded spacing and offset values.

Jul 19, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG shapes. The code appends a yellow circle for the head, two dark circles for eyes, and a semi-circular mouth created with the `arc` generator. Eyebrows are rectangles that animate vertically using chained `transition` calls with a 2000-millisecond duration, moving up and down repeatedly. The example relies on D3 v5’s selection methods like `append` and `attr`, with all elements centered via a translated group.

Jul 19, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple animated smiley face drawn in an SVG canvas using D3.js. The face consists of a yellow circle, two eyes, eyebrows, and a mouth shape. It demonstrates core DOM manipulation with `d3.select` and `svg.append`, applying attributes like `attr('r')`, `attr('cx')`, and path building via `d3.arc`. The eyebrows animate through chained `transition().duration(2000)` calls, moving them down and back up over four seconds. The code uses D3 v6 and explicitly sets the SVG background to red via `svg.style`.

Jul 19, 2019