Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Mmarcob896
Last edited Jan 18, 2021
Created on Jan 18, 2021

This example uses D3.js to build a smiley face directly in SVG, with animated eyebrows that move up and down in a repeated cycle. It demonstrates basic DOM manipulation by creating circles for the eyes and face, rectangles for the eyebrows, and an arc path for the mouth using D3’s `arc()` helper. The animation relies on chained `transition().duration()` calls to shift the eyebrows’ vertical position. The code explicitly imports `select` and `arc` from D3 and renders everything within a 960x500 SVG canvas.

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 shows a smiley face whose eyebrows periodically move up and down, demonstrating basic DOM manipulation with D3.js. The face is drawn using SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The animation uses D3's `transition()` method to shift the eyebrow group’s transform attribute back and forth, creating a looping motion. The code imports `select` and `arc` from the D3 v5 library and relies on SVG for rendering.

BBrickDust
97% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel
97% 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!

A D3.js smiley face demonstrates basic DOM manipulation with animated eyebrows. Built with d3.v5, the example uses D3 selections to append SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—into a centered group. A two-stage `transition()` chain moves the eyebrow group up and back down over four seconds, illustrating D3's animation timing. The code imports `select` and `arc` from the 'd3' package, with dimensions read directly from the SVG attributes.

SSayan Chatterjee
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 static smiley face in SVG and animating its eyebrows. The face is built from primitive shapes—circles for the eyes, rectangles for the eyebrows and hair, and a path generated with the `arc()` function for the mouth—all positioned within a centered `<g>` element. Using `transition.attr`, the eyebrows move upward and then return to their original position over repeated two-second intervals. The code relies on `d3.select`, `d3.arc`, and chained transitions to create the looped motion.

BBenoit Estrade
96% match
Loading thumbnail…

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

A smiley face drawn with SVG shapes animates its eyebrows, moving them up and down. The example demonstrates basic D3.js DOM manipulation by selecting the SVG element, appending groups, and building the face from circles, rectangles, and an arc path. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` methods to create the two-second eyebrow animation loop, with dimensions defined via attributes on the root SVG.

AAbin
96% match
Loading thumbnail…

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase
96% match
Loading thumbnail…

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

This example shows a stylized smiley face built with D3.js v5, rendered as SVG with animated eyebrows that move up and down repeatedly. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending groups, circles, rectangles, and a path for the mouth. The code uses D3’s `select` and `arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow positions. The face is centered with a magenta circle background, and the animation loops via transition chaining without external data, relying purely on hardcoded geometric constants.

TTarun Kumar Bosupally
96% match