D3 JS Face!

100%

✓ Published0🌍 Public

Last edited Jan 16, 2020

Created on Jan 15, 2020

Forked from Let's make a face with D3.js!

A smiley face rendered in SVG animates its eyebrows in a sequence of timed transitions. The face is drawn with D3.js primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The animation uses D3’s `.transition().duration()` to move the eyebrows up, hold, and return, demonstrating fundamental DOM manipulation with `d3.select` and element creation.

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 with black outlines is drawn in an SVG canvas, then its eyebrows animate upward and back down in a repeating motion. The example demonstrates basic D3.js v5 DOM manipulation by using `d3.select`, `append`, `attr`, and chained `transition().duration()` calls to move the rectangular eyebrows. The face is constructed from circles for the eyes and an `arc()`-generated path for the mouth, positioned relative to the SVG center. All rendering uses SVG elements with D3 applying attributes directly, and the eyebrows’ movement is the only animated behavior shown.

JJeet Jain

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov

93% 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

93% match

Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song

93% match

Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn in SVG shows animated eyebrows that rise and fall over repeated two-second transitions. The example demonstrates fundamental DOM manipulation with D3.js v5, using selections to append circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. Eyebrow motion relies on chained `transition().duration()` calls that alternate the transform attribute.

SSaket Anand

93% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a yellow smiley face centered in an SVG canvas, with eyebrows that repeatedly move upward and then return to their original position. The face is constructed from SVG circles for the eyes, rectangles for the eyebrows, and a path for the mouth generated with the `d3.arc` API. D3’s `transition` method animates the eyebrow group’s `transform` attribute over two-second intervals. The code uses D3 v5’s `select` and `append` functions to manipulate the SVG DOM directly.

Ssapan2997

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811

93% match