Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Ssoniyaa-dv
Last edited Jul 21, 2020
Created on Jul 21, 2020

A yellow smiley face rendered as an SVG in D3.js demonstrates basic DOM manipulation and animation. The face is composed of simple shapes—a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses `d3.select` and `d3.append` to build the hierarchy, with a `transition` animating the eyebrows upward and back over two timed intervals. The example shows how D3 can drive SVG element attributes and transformations.

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

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 for fundamental DOM manipulation. Circles form the head and eyes, while an arc path creates the mouth. Two rectangular eyebrows animate independently using `transition().duration(3000)` to shift their vertical position. The code demonstrates chaining `.attr()` methods to set SVG attributes, using the `select` and `arc` APIs from the d3 module, and applies static styling through a linked stylesheet. This example focuses on basic element creation and sequential transitions.

RRAMANDEEP SINGH
97% match
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 is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

AAnkit
97% 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
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 yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

Bbbak92
97% match