Skip to main content
SimilarExport ZIP
100%

Let's make a smiley face with D3.js

✓ Published0🌍 Public
DDifan Gu
Last edited Jul 8, 2020
Created on Jul 8, 2020

This example creates a smiley face from basic SVG shapes using D3.js, drawn on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two eyes, rectangular eyebrows, and a mouth created with D3’s `arc` function. The eyebrows animate by chaining two `transition().duration(2000)` calls, moving them down and then back up over four seconds. The code uses D3 v5 selections (`select`, `append`) and attribute setters to position elements via transforms.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4
96% match
Loading thumbnail…

Let's make a smiley face with D3.js

A yellow smiley face is drawn in SVG using D3.js v5, with a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth generated with the `arc` helper. The eyebrows animate vertically via chained `transition().attr()` calls, moving down then returning over four seconds. The SVG dimensions are read directly from the markup, and the face is centered using a translated `<g>` group. The example demonstrates basic SVG shape creation and D3 transitions.

VVeena Muralidharan
95% 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!

D3.js draws a yellow smiley face as a scalable SVG, centered in a 960×500 canvas. The face’s circular head, eyes, eyebrows, and arcing mouth are built by appending SVG primitives—`circle`, `rect`, and `path`—to a group. The example demonstrates core DOM manipulation with `d3.select` and `append`, while a chained `transition().duration(2000)` sequence animates the eyebrows, moving them up and down over four seconds. The mouth uses the `d3.arc` shape generator with specified inner and outer radii and angle ranges.

CChetan Hebsur
95% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a curved path for a mouth. The face is centered on an SVG canvas, and animated eyebrows and mouth move through a sequence of positions using D3 transitions with a two-second duration. The code explicitly uses D3's `select`, `append`, `attr`, and `transition` methods to manipulate DOM elements, building the face from primitive shapes.

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

Let's make a face with D3.js!

A smiley face is built from SVG shapes, with a yellow circle for the head, two dark eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate up and down in a looping transition to give the face a playful expression. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, while `transition.duration` animates the eyebrow group’s transform. All elements are appended to a group centered within an SVG canvas, demonstrating basic DOM manipulation with D3.

LLeonardo Borges Firmino
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth built from SVG shapes using D3.js. The face is centered in an SVG canvas, with a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3’s `selection.append`, `attr`, and `transition` APIs animate the eyebrows by shifting their group’s transform down and back over two two-second intervals. The code imports `select` and `arc` from the d3 module and uses chained transitions to create the movement.

Ssourcebox-bug
95% match