Jishen Xu

@xujames0214·3 public vizzes

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

Aug 25, 2018

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js (v5) to construct an animated smiley face entirely through SVG primitives and DOM manipulation. It shows how a face composed of a circle, eyes, eyebrows, and a mouth can be built and animated on an empty 960x500 SVG canvas. The code demonstrates chained `transition().duration()` calls to move the left eyebrow up and down over two seconds, while the right eyebrow is a rectangle and the mouth is an arc path generated with the `d3.arc` API. All elements are positioned through SVG attributes and groups, with no external data—the face is purely synthetic.

Aug 25, 2018

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js selections to build its features. The code draws a yellow head, eyes, and a mouth with an `arc` path generator, while the eyebrows animate through chained `transition` calls that alternate their vertical offset. The face is centered with a translation, and all shapes are created by appending SVG elements, demonstrating basic DOM manipulation and data-driven animation.

Aug 25, 2018