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

100%

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

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 23, 2023

This example displays a cartoon smiley face built with SVG shapes using D3.js v5. The face includes animated eyebrows that move up and down via chained `transition.duration` calls, along with static features such as eyes, a nose, mouth, teeth, hair, beard, and sunglasses. The code uses D3 selections and the `arc` generator to create the mouth path, and demonstrates fundamental DOM manipulation by appending circles, rectangles, and paths to an SVG canvas. A video tutorial is embedded in the README.

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!

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

95% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a smiley face from basic SVG shapes and animates its eyebrows. The face comprises a green circle, two eyes, a mouth drawn with an arc, and two rectangular eyebrows. D3’s `transition` API moves the eyebrows up and down in a two-second loop. The code builds the SVG scene by directly appending elements like `circle`, `rect`, and `path` to a centered group, using `d3.select` to target the SVG and `d3.arc` for the mouth’s path data.

Ssugunagar

95% match

Loading thumbnail…

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

An animated smiley face with moving eyebrows, rendered as SVG via D3.js, demonstrates fundamental DOM manipulation. The face is built using basic D3 shapes—circles, rectangles, and an arc-generated mouth—positioned within a centered group. The eyebrows transition vertically through chained `transition().duration()` calls, creating a repeating bobbing effect. Additional elements include ears, hair, and teeth, all styled with simple fill and stroke attributes. The code imports `select` and `arc` from D3 v5 to construct the geometric components and drive the animation.

CChandrashekharRamamuthi

95% match

Loading thumbnail…

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

This animated SVG smiley face demonstrates fundamental DOM manipulation with D3.js. The visualization uses D3's selection and append methods to construct geometric shapes—a pink circle head, two black eyes, rectangular eyebrows, and an arc-based mouth—all centered within an SVG canvas. The eyebrows perform a continuous up-and-down motion through chained `transition().duration(2000)` calls that alternate between two vertical positions. The code relies on D3 v5 utilities including `select`, `arc`, and the transition API to create the looping animation effect.

PPrathyusha Jampala

95% match

Loading thumbnail…

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

This example shows an animated smiley face with moving eyebrows, created entirely in SVG using D3.js v5. It demonstrates fundamental DOM manipulation by appending and styling circles, rectangles, and paths for facial features, with eyebrow transitions that repeat via chained `transition` calls. The face is centered in a 960x500 SVG canvas, and the code relies on D3's `select`, `arc`, and transition APIs to build the static features and animate the eyebrows over four-second cycles.

TTejaswicmandava

95% match

Loading thumbnail…

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

This interactive D3.js example builds a stylized smiley face entirely from SVG shapes, including circular eyes, a path-based mouth, and rectangular teeth. An animated sequence moves the eyebrows up and down by chaining two `transition().duration(2000)` calls, demonstrating how to create simple motion via DOM attribute transforms. The code uses `d3.select` and `d3.arc` from the D3 v5 API to construct the face's components, with all geometry centered through a single transformed group. The result shows how D3's declarative SVG manipulation can produce playful, character-driven visualizations.

BBrian Gilmore

94% match

Loading thumbnail…

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

This example uses D3.js to construct a smiley face out of basic SVG shapes, then animates it. The code builds a blue circle for the head, eyes, and a mouth using `d3.arc`, while two rectangular eyebrows are moved up and down via chained `transition.attr` calls with a 2000ms duration. The animation runs in a loop, demonstrating select-and-append DOM manipulation and declarative transitions on SVG elements.

JJyothicherukuri

94% match

Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

94% match