Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Pprachow
Last edited Feb 22, 2023
Created on Feb 22, 2023

This example demonstrates fundamental DOM manipulation with D3.js by animating a smiley face whose eyebrows move up and down. It shows how to build the SVG face from basic shapes—circles for the eyes, rectangles for the eyebrows, and an arc for the mouth—before applying a two-stage transition to the eyebrow group. The code uses d3-selection and d3-shape’s `arc()` to construct the path, with `transition().duration()` chaining to create the animated eyebrow movement. The face is centered using an SVG group with a translated transform.

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

A smiling face rendered with SVG shapes uses D3.js to animate its eyebrows. The code builds the face from circles, rectangles, and an arc path, then applies chained transitions with `transition.attr` to move the eyebrows up and down. The example demonstrates fundamental DOM manipulation with D3's selection and arc methods, showing how to construct and animate a basic graphic using d3.v5.

PPrathyusha Jampala
96% match
Loading thumbnail…

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

A smiling face drawn with D3.js animates by repeatedly moving its eyebrows up and down. The visualization demonstrates fundamental DOM manipulation by building the face from SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Using D3 v5 and the `select` API, the eyebrows are animated with chained `transition` calls, each lasting two seconds, to create a looping motion.

Pprachow
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 SVG shapes, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala
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 smiling face whose eyebrows animate up and down. It shows how to select an SVG element, append grouped shapes—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—and position them using translation transforms. D3’s `transition().duration()` chains move the eyebrows vertically over two seconds, while the mouth uses `d3.arc()` to create a curved smile. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG.

Ddhanushkar006
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