Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Feb 11, 2019

Created on Feb 11, 2019

Forked from Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by constructing a smiling face from SVG primitives and animating its eyebrows. Built with D3 v5, the code uses the `select` API to target the SVG element and `append` to create circles, rectangles, and a path for the mouth. The eyebrows are animated using chained `transition().duration()` calls, moving them vertically over two seconds before returning to their original position, with the mouth drawn via D3's `arc` function to create a crescent shape.

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 smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows move up and down. It uses D3’s `select` and `append` to create SVG circles, rectangles, and a path for the mouth, with the mouth drawn via the `arc` generator. The animation relies on chained `transition` and `duration` calls to shift the eyebrow group’s transform attribute. The code imports named methods from the d3 module and sets attributes like `r`, `cx`, and `d` directly on SVG elements.

LLucian-jw

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiling face and animating its eyebrows. The code appends SVG shapes—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—using D3’s `select` and `append` methods. The eyebrows move via chained `transition()` calls with a two-second duration, shifting their vertical position and then returning. The scene is rendered in an SVG canvas with a 960 by 500 coordinate space, centered through a transform.

SSandyWu7179290504

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan

95% match

Loading thumbnail…

Let's make a face with D3.js!

AArriannePandaraoan

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation using D3.js by creating a smiley face with animated eyebrows. The face is drawn with SVG shapes, including circles for the eyes and a path for the mouth, all positioned using D3's `select` and `append` methods. A `g` element transforms to center the face, while the eyebrows move up and down using chained `transition` calls over two seconds each, showing how D3 can animate attribute changes. The code uses D3 v5 and the `arc` shape generator for the mouth’s curved path.

CCurran Kelleher

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate up and down. The code uses `d3.select` to target an SVG element, `svg.append` to construct geometric shapes like rectangles and arcs, and `transition().duration()` to create a looping eyebrow movement over two seconds. The face is rendered as a static SVG with a semi-transparent green rectangle, red-stroked eyes, and a mouth drawn via the `d3.arc` shape generator, all centered using SVG group transforms.

NNikkor

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips

95% match