Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
Kkiyimba5
Last edited Feb 28, 2021
Created on Feb 28, 2021

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The SVG-based visualization builds the face using `d3.select` and `d3.arc` for the mouth, while circles and rectangles form the eyes and eyebrows. The eyebrows move up and down via chained `transition.attr` calls over four seconds, shifting the group’s transform. Rendering is static except for this looping eyebrow animation, with all elements positioned around a centered translation of the SVG viewport.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation in D3. The code uses d3.select and append to build SVG circles for the face and eyes, rectangles for eyebrows, and a d3.arc-generated path for the mouth. An eyebrow group animates via chained transition and duration calls, shifting its translate transform up and down over two seconds. The example uses D3 v5 with a declarative selection-based approach, rendering entirely in SVG.

Nnamkhang0807@gmail.com
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is constructed with SVG circles, rectangles, and an arc-generated mouth, all positioned relative to the center of the viewport. The eyebrows use chained `transition().duration()` calls to move vertically and back, creating a blinking effect. The code imports `select` and `arc` from D3 v5 and builds the visualization entirely through SVG attributes.

CCharlene Ong
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is drawn using SVG circles for the eyes, rectangles for the eyebrows, and a d3.arc() path for the mouth, all centered within an SVG canvas. The eyebrows move up and down repeatedly through chained transition().duration() calls that change their transform attribute. The example uses d3.select and d3.arc from the d3 v5 library to construct and animate the static SVG elements.

JJorrr2
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code uses d3.select, d3.arc, and chained transitions to move rectangular eyebrows up and down over time. The face is built from SVG circles for the eyes and head, and a path created with the arc generator for the mouth. All elements are positioned relative to a centered group using transform attributes.

Ssu10king
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows move up and down in a looping animation. The visualization uses SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—centered within a 960×500 viewport. The code leverages D3 v5 selections, the `arc` generator for the mouth shape, and chained `transition().duration(2000)` calls to animate the eyebrow group’s vertical position. The face is static except for the eyebrows, showcasing how D3 binds data to visual properties.

Jjunior-armando
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn entirely with SVG primitives—a circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated by `d3.arc` for the mouth. Using `d3.transition` with a two-second duration, the eyebrow group repeatedly shifts vertically, creating a bobbing motion. The code leverages D3 selections and attribute setting to build the static facial features, then applies chained transitions to animate the eyebrows independently of the rest of the face.

Aaanawaz
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
97% match