Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Iidwann-eng
Last edited Mar 3, 2020
Created on Mar 2, 2020

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.

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!

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

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

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

Let's make a face with D3.js!

A smiley face built with D3.js animates its eyebrows in a looping vertical motion. The example demonstrates fundamental DOM manipulation by selecting an SVG canvas and appending circles, rectangles, and a mouth path using `d3.select` and `d3.arc`. Eyebrow movement relies on chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute up and down. The face is centered via a translated `<g>` element, with static geometry defined by numeric constants for eye spacing, radius, and eyebrow dimensions.

AAXE
97% match
Loading thumbnail…

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
97% match
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.

Lliunaiming
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
96% match