Skip to main content
SimilarExport ZIP
100%

Smile face using D3.js

✓ Published1🌍 Public
AAbhishek Chandarana
Last edited Aug 19, 2020
Created on Aug 19, 2020

This example builds a smiling face with SVG shapes using D3.js v5. It draws a yellow circle for the head, two black circles for the eyes, and an arc-generated mouth using the `arc()` function. Animated eyebrow rectangles transition vertically via `transition.attr`, moving them up and down repeatedly. The face is centered with a group transformation, and all shapes are styled with fill and stroke attributes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
94% match
Loading thumbnail…

Lets make a face with D3.js

This example builds a smiley face entirely with D3.js v5, using SVG shapes and animated transitions. A yellow circle forms the head, while arcs, circles, and rectangles create the mouth, eyes, nose, and eyebrows. The eyebrows animate up and down via chained `transition().duration()` calls, and the code imports `select` and `arc` from the D3 library. The face is centered using SVG group transforms, with coordinates calculated from the viewport height and width.

TThao Nguyen
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Mmirna981
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Mmirna981
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog
93% match