Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Zzahrus
Last edited Apr 7, 2019
Created on Apr 7, 2019

An animated smiley face built with D3.js v5 demonstrates fundamental DOM manipulation through SVG rendering. The example uses `d3.select` to append shapes—circles for the eyes, rectangles for eyebrows, and an `arc()` path for the mouth—arranged with explicit X/Y coordinates and `attr` transforms. A two-stage `transition().duration(2000)` chain moves the entire eyebrow group up and then back down, creating a subtle raising-and-lowering animation. No external data is loaded; all geometry is hand-coded, and the interaction is purely visual.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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
96% match
Loading thumbnail…

Let's make a face with D3.js!

An animated smiley face built with D3.js v5 demonstrates fundamental SVG DOM manipulation through `select`, `append`, and `attr` calls. The face comprises circles for eyes, rectangles for eyebrows, and an `arc`-generated path for the mouth, all positioned within an SVG group. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the eyebrow group’s `transform` translate value up and down. The code shows direct attribute styling for fill and stroke, with no external data source, relying entirely on hardcoded coordinates and D3’s animation API.

Ffasynator
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered with D3.js demonstrates basic DOM manipulation and animation. The code uses D3 selections to append SVG circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. A two-stage `transition` moves the eyebrow group vertically over four seconds, creating an animated expression. The face is centered via SVG transforms, with all shapes drawn using D3's `select`, `append`, `attr`, and `transition` APIs.

BBrian Merchant
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built entirely with D3.js demonstrates fundamental DOM manipulation and animation. The code uses D3 selections to append and style SVG shapes including circles for the head and eyes, rectangles for the eyebrows, and a path generated with the d3.arc function for the mouth. The eyebrows animate upward and downward via chained transition().duration() calls, shifting their containing group’s transform attribute over four seconds. The example relies on D3 v5, loaded from a CDN, and renders in an SVG canvas without external data.

CCristian Tovar
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Ggcappadaniel
95% match
Loading thumbnail…

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
95% match