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

100%

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

✓ Published0🌍 Public

Last edited Aug 17, 2022

Created on Aug 17, 2022

Forked from Let's make a face with D3.js!

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

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 yellow smiley face drawn with SVG, whose eyebrows animate up and down in a repeating loop. The code uses D3.js v5 selection methods to append circles for the eyes and face, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. Two chained `transition` calls, each lasting 2000 milliseconds, shift the eyebrow group’s transform attribute to create the movement. The face is centered using a group translated to the middle of a 960-by-500 SVG canvas.

Ssalim.mir@outlook.com

98% match

Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1

98% match

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Ddmpiq

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

Loading thumbnail…

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok

97% match

Loading thumbnail…

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

A yellow smiley face is drawn with two eyes and a curved mouth, and its eyebrows animate by moving upward and then back down in a loop. The example demonstrates fundamental D3.js v5 DOM manipulation using SVG elements like `circle`, `rect`, and `path`. The code uses `select` and `arc` from D3, and the animation is driven by chained `transition().duration(2000)` calls that alter the `transform` attribute on the eyebrow group.

Aalvasilvao

97% match

Loading thumbnail…

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

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows and a static mouth. The face is constructed using SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows move up and down via chained `transition().duration()` calls, demonstrating fundamental DOM selection and manipulation with d3.select and d3.append. The code imports specific functions like `select` and `arc` from the D3 v5 module, and positions all elements within a centered SVG group.

YYUTONG FENG

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