Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Ssrrajendran
Last edited Nov 6, 2018
Created on Aug 29, 2018

A smiley face built with SVG shapes demonstrates D3.js v5 DOM manipulation and chained transitions. The code uses `d3.select`, `append`, and `attr` to construct a yellow circle with eyes, rectangular eyebrows, and an arc-based mouth via `d3.arc()`. A two-step `transition().duration(2000)` sequence moves the eyebrow group up and down, creating an animated expression. The example relies on D3’s data-join-free imperative style, directly targeting SVG elements within a 1000×500 viewport without external data.

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 built from basic SVG shapes—a yellow circle, two eyes, and a mouth—demonstrates D3.js DOM manipulation. The code uses `d3.select` and `d3.append` to construct elements, while `d3.arc` defines the mouth path. A continuous `transition` animates the eyebrows upward and downward over two-second intervals, showing chained movement. The example relies on D3 v5, rendering in SVG, with dimensions taken directly from the `<svg>` attributes.

AAravind Subramaniam
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears on an SVG canvas, built entirely through D3.js DOM manipulation. The face uses circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. A chained `transition` animates the eyebrows upward and back over two-second intervals, creating a winking expression. The code imports `select` and `arc` from D3 v5 to construct and update SVG elements dynamically.

Ssrrajendran
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
97% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a yellow smiley face with eyes, eyebrows, and an arc-based mouth, then animates the eyebrows upward and back down using chained `transition` calls on SVG `rect` elements. The face is centered via a `g` transform, with `d3.arc` generating the mouth path. The code selects an SVG, appends shapes with explicit pixel offsets, and relies on D3 v5’s `select`, `attr`, and `transition` APIs to demonstrate fundamental DOM manipulation and animation.

Ssathishkottravel
97% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face assembled from SVG shapes animates in D3.js v5: a yellow rectangle transitions to green, and two eyebrows rotate as the mouth flips upside down. The code demonstrates fundamental DOM manipulation with `d3.select`, appending grouped circles, rectangles, and an `d3.arc`-generated path into an SVG canvas. Transitions via `.transition().duration(2000)` smooth the color and transform changes over two seconds.

OOxfordComma
97% 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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG demonstrates fundamental D3.js DOM manipulation and transitions. The code selects the SVG element, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth using `d3.arc`. Two eyebrow rectangles animate upward and back via chained `transition().duration(2000)` calls, shifting their parent group's transform attribute. The example uses D3 v5 and relies on `select` and `arc` from the d3 module.

JJepyagg
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
96% match