Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Sskambhore04
Last edited Feb 18, 2022
Created on Feb 18, 2022

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

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!

This example uses D3.js to construct a simple, animated smiley face entirely from SVG shapes. A circle forms the face, with smaller circles for eyes and cheeks, rectangles for eyebrows, nose, and mouth, all positioned relative to the center. The code demonstrates fundamental DOM manipulation with `d3.select` and `append`, while `setInterval` triggers D3 transitions that move the eyebrows and enlarge the cheeks in a looping animation.

Ssatishnarne99@gmail.com
96% 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 smiley face with green circular head, eyes, and an arc-based mouth. An animated sequence uses chained `transition()` calls to move the rectangular eyebrows upward and back over two-second intervals, creating a winking effect. Built with D3 v5, it uses `select`, `attr`, and the `arc` generator to construct SVG shapes, with all elements positioned mathematically based on the SVG dimensions and eye spacing constants.

BBrian Isale
96% match
Loading thumbnail…

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

A smiling face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The face, composed of circles, ellipses, and a path-based mouth, is assembled through chained `append` calls and coordinate transformations. The most prominent behavior is the animated eyebrows, which move up and down using a `transition().duration(2000)` sequence. This example showcases D3’s core API for selecting elements, applying transforms, and creating simple timeline-based animations without any external datasets.

Ssaiyogesh9911@gmail.com
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation in D3.js by constructing a static smiley face and animating its facial features. The face is composed of SVG shapes, including circles for the head and eyes, arc-based paths for eyebrows and mouth, rectangles for the nose and teeth, all colored with pink, black, red, and white fills. The animation uses D3’s `.transition()` method to move the eyebrows vertically over two-second intervals, while the code employs `d3.select`, `d3.arc`, and SVG attribute setters to position every element relative to the canvas center.

SSharmaAshwini
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77
96% match
Loading thumbnail…

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

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

MMaurice Huang
96% match
Loading thumbnail…

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

Built with D3 v5, this example demonstrates fundamental DOM manipulation and animation by constructing a smiley face from SVG shapes. The code uses `d3.select` to append a circle, eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down in a looping motion. All elements are centered within an SVG using a translated group, with dimensions pulled from the SVG attributes. The example highlights basic selections, attribute setting, and transition tweening without external data.

VVenu
96% match
Loading thumbnail…

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

This example demonstrates DOM manipulation with D3.js by constructing a smiley face from SVG shapes, complete with a sky-blue head, eyes, nose, mouth, and ears. The most notable behavior is the animated movement of the eyebrows, which shift upward and then return to their original position over a two-second cycle. The code uses D3 v5 and the `select` and `append` functions to build the SVG structure, and it leverages chained `transition` calls to animate the eyebrows' transform attribute. The SVG canvas is 960 by 500 pixels, and the face is centered within it.

Nnsatyaprakash22
96% match