Making a

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

CCameron

Let's make a face with D3.js!

A smiley face drawn in SVG animates its eyebrows upward and back down using chained D3 transitions. The d3.select and d3.arc APIs construct circles and a mouth path, while transition.attr modifies the eyebrow group's transform over two two-second intervals. The example demonstrates fundamental DOM manipulation with D3 v5, rendering static geometric shapes and coordinating timed attribute changes on grouped SVG elements.

LLucian-jw

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

Let's make a face with D3.js!

A smiley face rendered in SVG animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles, rectangles, and a path to an SVG group, using `d3.arc` for the mouth. The eyebrows move via chained `transition().duration()` calls that shift their vertical position. The code uses `d3.select` and `d3.arc` from d3.v5, with all shapes positioned through SVG attributes and a centered group transform.

Ppvklplnn

Let's make a face with D3.js!

A smiley face built with SVG shapes animates its eyebrows in a looping vertical motion. The example demonstrates fundamental D3.js DOM manipulation by chaining `select`, `append`, and `attr` calls to construct circles, rectangles, and an arc-based mouth. Using `d3.arc` for the mouth and `transition().duration()` on a group element, the eyebrows shift up and down over two-second intervals. D3 v5 handles all rendering in an inline SVG, with no external data source.

GGray1011

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

BBrett Cunningham

Let's make a face with D3.js!

An animated smiley face is built from basic SVG shapes, with eyes that blink and eyebrows that raise and lower in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending a group, and positioning circles, rectangles, and a path for the mouth. Using chained `transition()` calls, the code animates the eyebrow’s transform attribute and the eye’s radius over two-second durations. The mouth is drawn with D3’s `arc` generator, and all elements are centered via SVG group transforms.

Zztawil