Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDhiyan-jay
Last edited Jul 8, 2021
Created on Jul 8, 2021

A smiling yellow face with black features animates its eyebrows, which move upward and then settle back down in a continuous loop. Built with D3.js v5, the visualization uses SVG shapes—circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The eyebrow motion is achieved through chained `transition()` calls that alter the group’s translate transform over two-second durations.

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 Fork of Let's make a face with D3.js

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar
95% match
Loading thumbnail…

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

This example shows a yellow smiley face with animated eyebrows, which shift upward and then return to their resting position in a looping motion. The face is constructed entirely from SVG primitives—circles for the eyes and head, rectangles for the brows, and a path for the mouth—all centered within a 960×500 viewport. Using D3 v5, the code demonstrates DOM manipulation through chained `select`, `append`, and `attr` calls, while the eyebrow animation relies on the `transition` API to tween the `transform` attribute over 1500 milliseconds.

DDeeraj Thakkilapati
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi
95% 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
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering with D3.js. The face is constructed from SVG circles for the eyes and face, a path created with the `d3.arc` function for the mouth, and rectangles for the eyebrows. Animated eyebrow movement is achieved using `transition()` and `attr` chaining over two 2000-millisecond intervals. The example uses D3 v5 and shows how to select and manipulate SVG elements with data-driven methods.

NNiharika Reddy Amanaganti
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js. The code builds the face using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path created with d3.arc for the mouth. Eyebrows move up and down through chained transition.attr calls, each lasting two seconds. The example uses d3.select and d3.arc from D3 v5, with the entire scene rendered as static SVG elements on a 960×500 canvas.

Rradhadevarapu
95% match