Animated smiley with D3.js

100%

Animated smiley with D3.js

✓ Published1🌍 Public

Last edited Jan 6, 2021

Created on Jan 2, 2021

A yellow smiley face with eyebrows animates on an SVG canvas using D3.js v6. The face is constructed from SVG primitives: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` generator for the mouth. The `transition` API repeatedly moves the eyebrows up and down in a looping animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js

A smiley face rendered in SVG animates by raising and lowering its eyebrows. The yellow circular head, black eyes, and mouth are drawn using D3 v6 shape generators and SVG primitives. The code uses `arc()` for the mouth, `circle` and `rect` elements for facial features, and chained `transition().duration()` calls to move the eyebrow group up and down over two-second intervals.

SSerena Fang

93% match

Loading thumbnail…

d3js

A yellow smiley face with black outlines and animated eyebrows is drawn in a 960x500 SVG canvas using D3 v5. The face comprises circles for the head and eyes, rectangles for eyebrows, and a path generated with the D3 `arc` function for the mouth. The `d3.select` and `d3.transition` APIs animate the eyebrow group’s vertical position over two seconds, creating a blinking effect. All shapes are appended to a central group, with code structured for clarity.

Ppei9223

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov

93% match

Loading thumbnail…

smiley face.js!

A yellow smiley face with animated eyebrows is drawn in an SVG using D3.js v5. The code selects the SVG element and appends groups and shapes (circles for eyes, rectangles for eyebrows, and a path for the mouth) using d3.select and d3.arc. Eyebrows move up and down via chained transition calls that alter their transform attribute. No external data is loaded; the visualization is purely code-generated.

Hhowlermonkeyar

93% match

Loading thumbnail…

Smiley Face with D3.js

A yellow smiley face rendered in SVG appears, composed of circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate upward and downward using chained D3 transitions. Built with D3.js v5, it employs `select`, `arc`, and `transition`, drawing all shapes on a blank 900x500 canvas without an external dataset.

SSoUmItRoBoT

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver

93% match

Loading thumbnail…

Smiley face with D3.js

A yellow smiley face rendered in SVG animates its eyebrows in a repeating up-and-down motion. Drawing from a simple hardcoded set of shape parameters, the code uses D3 selections and the `arc` generator to construct the face, eyes, mouth, and rectangular eyebrows. The animation relies on chained `transition` calls with a two-second duration to move the eyebrow group along the y-axis. The example is built with D3 v6 within a React starter project, targeting the SVG element directly.

Ssayli-lab

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely through D3.js selections and SVG shapes. The face uses circles for the head and eyes, rectangles for the brows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates their vertical position over two seconds, moving them up and back down, demonstrating fundamental DOM manipulation and tween-less attribute transitions in D3 v5.

Mmi-desai

92% match