Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
BBaji-2000
Last edited Feb 20, 2022
Created on Feb 20, 2022

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows animate upward and downward. It first builds the face using SVG shapes, including a red circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `arc` generator. The eyebrows then move repeatedly through chained `transition` calls, each lasting two seconds, shifting their vertical position on a continuous loop. The visualization relies on D3 selections and attribute methods to create and position elements within an 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 Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate upward and downward. The SVG face is constructed from circles, rectangles, and an arc path, using D3 selections to append elements and set attributes. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, translating the eyebrow group along the Y-axis. The code leverages D3 v5 modules like `select` and `arc`, with inline SVG coordinates defining the face’s layout.

Rradhadevarapu
96% match
Loading thumbnail…

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

This visualization demonstrates fundamental D3.js DOM manipulation by rendering a smiley face with animated eyebrows. The code uses D3 v5 to select an SVG element and append geometric shapes—circles for the face and eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. A chained `transition` with a two-second duration repeatedly moves the eyebrows upward and back down, creating a subtle expressive animation. The example relies entirely on D3’s selection, attribute, and transition APIs, with no external data sources.

Jjasondmelloprogrammer
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar
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 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
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!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows animate up and down. The face is built using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. D3 transitions animate the eyebrow group’s `transform` attribute over two sequential two-second intervals. The code selects the SVG element, appends a centered group, and uses D3’s `select` and `arc` imports to construct the static and dynamic elements.

NNiharika-Guthikonda
96% match
Loading thumbnail…

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

This visualization demonstrates a smiley face with animated eyebrows, moving up and down in a repeating two-second cycle. The face is built using fundamental D3.js DOM manipulation, appending SVG shapes like circles, rectangles, and a path-based mouth. The eyebrows move via chained `transition()` and `duration()` calls, which shift their vertical position. The code specifically utilizes D3 v5’s `select`, `arc`, and transition methods to create the static face and its simple dynamic expression.

IIsigned
96% match