Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
LLyanne Chin
Last edited Sep 13, 2022
Created on Sep 13, 2022

This animated example demonstrates a smiling face drawn with D3.js that continuously raises and lowers its eyebrows. The visualization uses basic DOM manipulation via `d3.select` and `svg.append` to construct the face from circles, rectangles, and a path. The eyebrows' movement is achieved using D3's `transition` method with a two-second duration, toggling between two vertical positions. The face is rendered as SVG elements on a 960 by 500 canvas, with the mouth created using the `arc` method to generate a semicircular path.

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 animates a simple smiley face rendered in SVG, with eyebrows that sequentially lift and lower to create a facial expression. It demonstrates fundamental DOM manipulation by building the face from basic shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—using D3.js v5 selection and attribute methods. The eyebrow movement is driven by chained `transition().duration()` calls, which animate the `transform` attribute over two seconds in each direction. The code uses `d3.select`, `d3.arc`, and `append` to construct the scene within a 960×500 viewport.

Cchanipon
94% 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
94% 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 looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen
94% match
Loading thumbnail…

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

This example demonstrates a smiling face drawn with D3.js v5, using SVG shapes and a continuous animation to move its eyebrows. The code constructs the face from basic SVG primitives, including circles for the eyes and a path generated by the `d3.arc` API for the mouth. Eyebrow movement is achieved by chaining `transition().duration(2000)` calls, which animate the `transform` attribute of a group element back and forth. The visualization runs on an 960x500 canvas, centering the facial features with hardcoded offsets and using D3's DOM selection and manipulation functions.

DDmytro Tyshchenko
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

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

A smiling face rendered as an SVG drawing with D3.js v5 animates its eyebrows in a continuous loop. The visualization demonstrates fundamental DOM manipulation by using D3 selectors to append circles, rectangles, and a path, with the mouth constructed via the d3.arc arc generator. Eyebrow movement relies on chained transition().duration() calls that translate the eyebrow group up and down over two-second intervals.

Eelayamaransekar
94% match