Let's make a smiley

100%

Let's make a smiley

✓ Published0🌍 Public

Last edited Jan 4, 2020

Created on Jan 4, 2020

Forked from Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation by constructing an animated smiley face. A circle forms the head, with smaller circles for eyes and rectangles for eyebrows, while an arc path creates the mouth. The eyebrows animate vertically using chained `transition().duration()` calls on a group element. Built with D3 v5, it uses `select`, `append`, and `attr` to position SVG shapes relative to a centered group, with a static background color set via inline styles.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips

91% match

Loading thumbnail…

Making a

A smiley face drawn with SVG shapes animates its features: the right eye slides horizontally, and the left eyebrow shifts vertically. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` to target the SVG element and `append` to create circles, a rectangle, and a path. The mouth is generated with the `d3.arc` API, which computes an annular sector path. Transitions with `.transition().duration()` animate the eye and eyebrow attributes over time.

Nnouralkhoury

91% match

Loading thumbnail…

Let's make a Smiley

This example shows a stylized smiley face built with D3.js that animates its eyebrows up and down. The face is constructed from SVG shapes: a yellow circle for the head, two dark circles for eyes, and a path generated with the `arc` function for the mouth. The eyebrows are rectangles that move via chained `transition().duration(2000)`, shifting vertically to create a playful expression. D3 v5 selections and attribute methods are used throughout, with the entire figure centered in a green-background SVG.

MMounikaBeerelly

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates its eyebrows upward and back down using chained D3 transitions. The d3.select and d3.arc APIs construct circles and a mouth path, while transition.attr modifies the eyebrow group's transform over two two-second intervals. The example demonstrates fundamental DOM manipulation with D3 v5, rendering static geometric shapes and coordinating timed attribute changes on grouped SVG elements.

LLucian-jw

90% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG shapes animates its eyebrows in a looping vertical motion. The example demonstrates fundamental D3.js DOM manipulation by chaining `select`, `append`, and `attr` calls to construct circles, rectangles, and an arc-based mouth. Using `d3.arc` for the mouth and `transition().duration()` on a group element, the eyebrows shift up and down over two-second intervals. D3 v5 handles all rendering in an inline SVG, with no external data source.

GGray1011

90% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to demonstrate fundamental DOM manipulation by building a stylized smiley face from SVG shapes. The face features animated eyebrows that move up and down via chained `transition().duration()` calls on a group element, creating a dynamic expression. The code explicitly constructs each facial component—circle for the face, two eye circles, rectangular eyebrows, and an arc-based mouth path—using D3’s `select`, `append`, and `attr` methods within an SVG canvas. The `arc()` generator calculates the mouth’s path with specified inner and outer radii.

Vveagy

90% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates basic DOM manipulation and transitions in D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that shift the group's `transform` attribute up and down. The face is centered via an SVG group with translated coordinates, and all styling is handled through inline attributes and a linked stylesheet.

Iidwann-eng

90% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan

90% match