Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published14🌍 Public
JJishen Xu
Last edited Aug 25, 2018
Created on Aug 25, 2018

A smiley face rendered in SVG uses D3.js selections to build its features. The code draws a yellow head, eyes, and a mouth with an `arc` path generator, while the eyebrows animate through chained `transition` calls that alternate their vertical offset. The face is centered with a translation, and all shapes are created by appending SVG elements, demonstrating basic DOM manipulation and data-driven animation.

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

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate basic DOM manipulation and animation. The face is built by appending circles for the head and eyes, rectangles for eyebrows, and a path generated with the `d3.arc()` API for the mouth. The eyebrows animate upward and back down over two sequential 2000-millisecond transitions, showing how `selection.transition()` chains. The code uses `d3.select` to manipulate the SVG elements and sets coordinates with fixed pixel offsets for facial features.

DDaniel Hug
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears in an SVG, built entirely through D3.js v5 selections and DOM manipulation. The face includes a head, two eyes, and a mouth drawn with the `d3.arc()` path generator. The eyebrows, rendered as rectangles, animate continuously via chained `transition` calls, moving up and then back over 2-second intervals. The example demonstrates fundamental SVG element creation, coordinate transforms, and data-driven attribute updates using D3's `select`, `append`, and `attr` methods.

Ssdilbaz
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match