Skip to main content
SimilarExport ZIP
100%

ICE4_11518301

✓ Published0🌍 Public
KKiran3295
Last edited Feb 21, 2022
Created on Feb 21, 2022

A smiley face rendered as an SVG animation uses D3 v7 to draw a yellow circle, black eyes, and a grinning mouth. The code imports `select` and `arc` from D3 to build primitive shapes, then repeatedly transitions the transform attribute of the eyebrow rectangles, raising and lowering them in a loop with `transition.attr` methods. The animation runs continuously, with each eyebrow movement lasting 1800 milliseconds total.

AI-generated description

datraviz 2018 #4 - smiley w/ d3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE4 dj3

This D3.js example shows a large yellow smiley face with circular eyes and an arc-shaped mouth, animated by a pair of rectangular eyebrows that shift vertically in a repeating two-second loop. The SVG elements are constructed programmatically using D3's `select`, `append`, and `attr` methods, while the eyebrow animation relies on D3's `transition` API with a sequence of timed `attr` transforms. The illustration uses no external data source, instead generating its geometry from hardcoded constants for spacing, radii, and offsets within a 960-by-500 viewport.

SSai Kaushik
92% match
Loading thumbnail…

ICE-4

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn as an SVG circle with two eye circles, a mouth created using the `d3.arc` path generator, and rectangular eyebrows. The eyebrows animate by chaining two `transition` calls with `duration(2000)`, moving them upward and then back to their original position. The code uses `d3.select` and `d3.arc` from D3 v5, with all elements appended to a centered `<g>` group within an SVG canvas.

PPrasanth Damarla
92% match
Loading thumbnail…

ICE-4

A yellow smiley face is drawn in the center of a 960x500 SVG canvas, with two eyes, a mouth, and eyebrows. The code uses D3.js v5 to select the root SVG element and append a group, circle, and path for the face and mouth. The animation animates the eyebrows upward and back down over four seconds by applying sequential D3 transitions to the group's transform attribute. All shapes are styled with SVG attributes for fill, stroke, and dimensions, and the example demonstrates fundamental DOM manipulation with D3's `select`, `append`, `attr`, and `transition` APIs.

PPrasanth Damarla
91% match
Loading thumbnail…

ice4

A smiling yellow face with black outlined eyes and rectangular eyebrows is drawn using D3.js v5 in an SVG. The animation shows the eyebrows moving up and down by chaining two `transition.attr` calls on a group element. The code uses `d3.select`, `d3.arc` for the mouth, and SVG primitives like `circle` and `rect`. Rendering is SVG-based with timed transitions.

Ssuchitra2602
90% match
Loading thumbnail…

ICE 4

This example animates a smiling face, constructed from a yellow circle head, two eyes, eyebrows, and a mouth, against a black stroke. The entire face is centered within an SVG canvas using a D3 translate transform. The code relies on D3’s `select` and `append` to build the SVG structure, and the mouth is drawn with a `d3.arc` path. A two-second `transition` sequence shifts the eyebrows up and down, creating a surprised or winking expression on the static face.

AAmar09nath
89% match
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
88% match
Loading thumbnail…

ICE 4 D3.js!

This visualization demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from basic SVG shapes. Orange circles form the head and ears, while white pupils, black-rimmed glasses, rectangular teeth, and arc-based nose and mouth complete the character. The eyebrows, rendered as rectangles, animate vertically through a chained sequence of D3 transitions, moving down then returning to their original position. The code uses d3.select, d3.append, and d3.attr for element creation and styling, with d3.arc for generating the nose and mouth paths and d3.transition for the eyebrow animation.

Aabdhaseeeb
88% match
Loading thumbnail…

ICE-4

A green smiley face animates by moving its rectangular eyebrows up and down. The demo shows fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to build SVG circles, rectangles, and paths. The eyebrows transition vertically via `transition().duration(2000)` chained calls. The mouth is drawn with the `d3.arc` generator. The animation runs continuously, shifting the eyebrows between two Y-offsets over two-second intervals.

CChandrashekharRamamuthi
88% match