Skip to main content
SimilarExport ZIP
100%

Smiley with D3.js

✓ Published1🌍 Public
Wwindwardpassage
Last edited Feb 7, 2020
Created on Jan 17, 2020

Built with D3.js v3, this animated SVG example constructs a cheerful smiley face from basic geometric primitives. The code uses D3 selections and method chaining to append a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-generated mouth. A 2-second transition animates the eyebrow group’s vertical position, creating a subtle winking effect. The example also includes an unused Heatmap class definition, though the visualization itself focuses solely on the SVG composition.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta
93% match
Loading thumbnail…

Animated smiley with D3.js

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.

AAditya Kumar
92% match
Loading thumbnail…

Smiley Face with D3.js

This example renders a static SVG smiley face—yellow circle, eyes, nose, and an arc-based mouth—centered on a 960×500 canvas. D3.js v5 selections build the shapes, while the `arc()` generator defines the mouth and nose paths. The only animation is a repeated 2-second `transition()` that moves the eyebrows up and down, demonstrating D3’s chained transitions on SVG attributes.

YYifu Chen
92% match
Loading thumbnail…

Smiley face D3.js

A yellow smiley face, composed of SVG circles and a path-based mouth, demonstrates D3.js DOM selection and manipulation. The code uses the `select` and `arc` APIs from D3 v5 to construct the face, and its appended groups and shapes are animated via chained `transition().duration(2000)` calls, which move the eyebrow rectangles up and down. The animation runs over a 960x500 SVG canvas, using a static JavaScript bundle for rendering.

BBruno Simoes
92% 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
91% match
Loading thumbnail…

Smiley face with D3.JS

A yellow smiley face with a black outline is drawn on a red background using D3.js, and its rectangular eyebrows animate by moving upward and then returning to their original position. The visualization demonstrates fundamental DOM manipulation with d3.select and svg.append, using D3’s arc generator for the mouth, and chained transition methods with a 2000-millisecond duration to create the repeating eyebrow motion. The code imports select and arc from D3 and renders everything as SVG elements.

Nnore2310
91% match
Loading thumbnail…

Smiling face with D3.js!

This example animates a cheerful smiley face drawn entirely with SVG shapes, with its eyebrows moving up and down in a looping motion. The face itself is constructed using basic D3.js selections to append a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth. The animation is driven by chained `transition().duration()` calls that alter the eyebrow group’s transform attribute, moving it vertically. The code imports `select` and `arc` from D3 v5, and positions all elements relative to the SVG’s center by applying a translate transform to a container group.

KKamalabot
91% match