Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNic Dominguez
Last edited Mar 1, 2021
Created on Mar 1, 2021

A smiley face rendered with SVG demonstrates fundamental DOM manipulation and animation in D3.js. The yellow circle, eyes, eyebrows, and arc-based mouth are constructed using selections and the `d3.arc` generator. The eyebrows move via chained `transition` calls over two-second durations, shifting their group's `transform` attribute up and down. The animation loops by alternating between two translate positions, while the static elements remain fixed. D3 v5 handles the SVG creation and all attribute updates.

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!

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
98% match
Loading thumbnail…

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

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The face consists of a yellow circle, two eyes, and a mouth arc, with rectangular eyebrows that animate up and down over two-second transitions using chained `transition` calls. The SVG elements are positioned using translation transforms within a central group. The example uses D3 v5 with the `select`, `append`, `attr`, and `arc` APIs to build and animate the face, rendering via SVG in a browser.

Sserrulate@gmail.com
97% match
Loading thumbnail…

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

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

XXenos Panagiotis
97% match
Loading thumbnail…

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 a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000
97% match
Loading thumbnail…

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. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03
97% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
97% match
Loading thumbnail…

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

A yellow smiley face rendered in SVG demonstrates D3.js DOM manipulation and animation. The code appends circles for the eyes, red nose, and arc-generated mouth, while rectangles serve as eyebrows that move via chained `transition.attr` calls over two-second intervals. Using `d3.select` and `d3.arc`, it builds the face from static shapes then animates the eyebrow group’s transform, showing basic enter-append and transition patterns with D3 v5.

TTomislav Pezer
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton
97% match