Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Wwangjonathan
Last edited Aug 28, 2018
Created on Aug 27, 2018

A smiley face composed of SVG circles and a path mouth is drawn with D3.js, then the circle and mouth transition colors and rotate while the left eyebrow rotates. The example demonstrates fundamental DOM manipulation and animation using d3-selection, d3-arc, and transition methods, with hardcoded coordinates rather than external data. Eyebrow animation is partly commented out, so only the left eyebrow moves via a chained rotate and translate transition.

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

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by building a smiley face with animated eyebrows. The SVG circle face, eyes, and rectangular eyebrows are appended to a centered group element, while the mouth is drawn using the `d3.arc` path generator. Eyebrow movement is achieved through chained `transition` and `.attr` calls that shift the group’s transform over two-second intervals. The code relies on D3 v5 selections and transitions, rendering entirely as animated SVG without external data sources.

FFelipe Menegossi
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion. The SVG face uses simple shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned relative to a centered group. D3’s selection and transition methods, including `transition().duration()`, move the eyebrow group up and down repeatedly. The code demonstrates fundamental DOM manipulation by binding data-less SVG elements and applying chained transitions without external data sources.

GGray1011
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion. The SVG face uses simple shapes—circles for the eyes and head, rectangles for eyebrows, and an arc path for the mouth—all positioned relative to a centered group. D3’s selection and transition methods, including `transition().duration()`, move the eyebrow group up and down repeatedly. The code demonstrates fundamental DOM manipulation by binding data-less SVG elements and applying chained transitions without external data sources.

GGray1011
94% match