Skip to main content
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Bbellotukurm
Last edited Sep 15, 2019
Created on Sep 15, 2019

A yellow smiley face is drawn with SVG circles, a path, and rectangles, then animated with D3 transitions that move its eyebrows and cap. The code uses D3’s `select`, `arc`, and `transition` methods to build and animate the face, which includes eyes, a curved mouth, and a red hat. The eyebrows shift up and down, and the cap slides side to side, demonstrating basic DOM manipulation and tweening with d3.v5.

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 built with SVG appears on screen, with a red cap that slides back and forth. The face’s eyebrows move up and down in a looping animation. Built using D3.js v5, the code demonstrates fundamental DOM manipulation through selections, appending circles, rectangles, and paths, and uses the `arc` generator for the mouth. Transitions with `transition().duration()` animate the cap and eyebrows by changing their `transform` attributes.

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

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely through D3.js selections and SVG shapes. The face uses circles for the head and eyes, rectangles for the brows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates their vertical position over two seconds, moving them up and back down, demonstrating fundamental DOM manipulation and tween-less attribute transitions in D3 v5.

Mmi-desai
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog
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 v5, with circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls. The code uses D3’s `select`, `arc`, and attribute setters to construct the face, with all elements centered using a translated `<g>` group.

MMMoronto
96% match