MakeFace

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

Ggonghewan

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is constructed by appending SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered using a group transform. D3 transitions move the eyebrow group up and down over two-second intervals, while the `d3.arc` helper generates the mouth's curved path. The example uses d3.select and d3.arc from the D3 v5 library, with static SVG rendering and CSS to hide page overflow.

MMichał Szumnarski

Let's make a face with D3.js - 2!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The code uses `d3.select` to build SVG shapes—circles for the face and eyes, rectangles for eyebrows, and an `arc()` path for the mouth—positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals, creating a repeating eyebrow raise. The example relies on D3 v5's selection and transition APIs, with all elements rendered directly into an inline SVG.

Mmallikgarjuna

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The face is drawn using SVG shapes, including a circle for the head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` helper. The eyebrows move upward and downward through chained `transition().duration(2000)` calls, altering their vertical translation. The example uses D3 v5 selections to append and style SVG elements within a centered group, illustrating basic data-driven document updates without external datasets.

Jjufrank

Let's make a face with D3.js!

A yellow smiley face drawn with D3.js demonstrates fundamental DOM manipulation as its eyebrows animate up and down. Using D3 v5 and SVG elements, the example builds the face from a circle, two eye circles, rectangular eyebrows, and an arc-based mouth via the `d3.arc()` generator. A chained `transition()` with `attr()` calls moves the eyebrow group sequentially over two-second durations, triggering the wiggle effect. Static geometry is appended through selections, while animation relies on D3's built-in transition API.

CChristine