Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
NNick Dyson
Last edited Nov 30, 2019
Created on Nov 30, 2019

This D3.js example builds a smiling cartoon face from scratch using SVG primitives. A yellow circle forms the head, while two circles with animated rectangular eyebrows and an arc-shaped mouth are positioned to create the expression. The right eyebrow repeatedly moves up and down via chained `transition().duration(2000)` calls, demonstrating D3's animation capabilities. All elements are scaled and centered using the `select` and `append` API from d3 v5.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows and eyes. The face is composed of SVG circles, rectangles, and an arc-generated mouth, all positioned using SVG attributes. D3 transitions sequentially enlarge and contract the eyes while translating the eyebrow group up and down, creating a winking expression. The code uses D3 v5 APIs including `select`, `arc`, and chained `transition` calls to animate the elements on an SVG canvas.

VVerdidk
95% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

JJishen Xu
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue
95% match