Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
CCameron
Last edited Jun 29, 2020
Created on Jun 29, 2020

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.

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 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
98% 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 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 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
96% 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
96% 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
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
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