Skip to main content
SimilarExport ZIP
100%

ice4

✓ Published0🌍 Public
Ssuchitra2602
Last edited Jun 18, 2022
Created on Jun 18, 2022

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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
91% 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
90% match
Loading thumbnail…

ICE4_11518301

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.

KKiran3295
90% match
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
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…

Smily ice4

A smiling face is drawn with D3 and React, featuring yellow circular head, black eyes and nose, and a curved mouth. The animation shows the rectangular eyebrows moving upward and then back down over a two-second transition each way. The code uses D3’s `select`, `arc`, and chained `transition` methods to build and animate SVG shapes, with React managing the page structure via the root div. The face is centered using an SVG group translation based on the viewport dimensions.

MM Hema
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
87% 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
87% match