Skip to main content
SimilarExport ZIP
100%

Creating a Smiley face with D3

✓ Published1🌍 Public
AAndy Chang
Last edited Sep 28, 2022
Created on Sep 28, 2022

A yellow smiley face rendered in SVG shows a mouth moving up and down while the entire face scales in size. D3 v7’s selection, `arc`, and `transition` APIs are used to construct the circle, eyes, and curved path for the mouth, with `setInterval` triggering repeated two-second transitions. Static SVG attributes position the face, while the mouth’s transform and the circle’s scale animate independently.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix
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…

Let's make a smiley face with D3.js

A yellow smiley face is drawn in SVG using D3.js v5, with a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth generated with the `arc` helper. The eyebrows animate vertically via chained `transition().attr()` calls, moving down then returning over four seconds. The SVG dimensions are read directly from the markup, and the face is centered using a translated `<g>` group. The example demonstrates basic SVG shape creation and D3 transitions.

VVeena Muralidharan
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 for fundamental DOM manipulation. Circles form the head and eyes, while an arc path creates the mouth. Two rectangular eyebrows animate independently using `transition().duration(3000)` to shift their vertical position. The code demonstrates chaining `.attr()` methods to set SVG attributes, using the `select` and `arc` APIs from the d3 module, and applies static styling through a linked stylesheet. This example focuses on basic element creation and sequential transitions.

RRAMANDEEP SINGH
92% 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
92% match
Loading thumbnail…

smiley face with D3

A yellow smiley face with blue eyes and an animated mouth is rendered as SVG. The face uses D3 selections to append circles, while the mouth is drawn with a D3 arc path that transitions from a filled semicircle to a curved smile over three seconds. The example leverages the React framework and D3 v6’s `arc` and `transition` APIs.

AAbdul Salam Almadani
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
92% match
Loading thumbnail…

Let's make a face with D3.js!

A simple yellow smiley face is drawn with SVG, featuring two eyes, eyebrows, and an arc-shaped mouth. The eyebrows rise and fall in a looping two-second animation using D3 transitions. All shapes are centered and positioned with D3’s `select` and `arc` APIs, with the arc generating the mouth’s curved path. The example demonstrates basic D3 v5 shape creation, group transforms, and chained `transition().duration()` calls for SVG animation.

Eestregan
92% match