Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssalim.mir@outlook.com
Last edited Apr 1, 2024
Created on Apr 1, 2024

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.

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 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.

Nnofferdahl
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
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate up and down. The face is constructed using D3.js v5 selections to append a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. The eyebrows move via chained `transition().duration(2000)` calls on a group element, shifting its `transform` translation between two vertical offsets. All shapes are centered using a group translated to the middle of a 960-by-500 SVG canvas.

MMercy7kumar
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 rendered as an SVG reacts to a repeating transition, with both eyebrows moving up and down in sync. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, and drawing shapes like circles, rectangles, and an arc for the mouth. It uses `d3.select` and `d3.arc`, with `transition().duration()` to animate the eyebrow positions over 600-millisecond intervals. The face is centered using SVG transform attributes, and the code runs with d3.v5.

Iiidalindh
97% 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!

This example shows a yellow smiley face with two eyes, moving eyebrows, and a curved mouth, rendered as SVG shapes. The eyebrows shift upward and then return to their original position using chained `transition().duration()` calls. The code builds the face with D3 selections and shape generators, including `select`, `arc`, and attribute setters like `.attr()`, positioning elements via `translate` transforms on a centered group. The face is drawn entirely through D3’s DOM manipulation, with no external data source.

SSUNAMLIMBU
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
97% match