Let's make a Smiley

100%

Let's make a Smiley

✓ Published4🌍 Public

Last edited Jun 5, 2020

Created on Jun 4, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a smiley face with D3.js

This example creates a smiley face from basic SVG shapes using D3.js, drawn on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two eyes, rectangular eyebrows, and a mouth created with D3’s `arc` function. The eyebrows animate by chaining two `transition().duration(2000)` calls, moving them down and then back up over four seconds. The code uses D3 v5 selections (`select`, `append`) and attribute setters to position elements via transforms.

DDifan Gu

92% match

Loading thumbnail…

Let's make a face with D3.js!

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

Kkesmith21

92% 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

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn with D3.js, composed of SVG shapes for the head, eyes, eyebrows, and mouth, with an animated eyebrow movement that raises and lowers them. The example uses D3 v5 selections to append and style elements, and `transition()` with a duration to create the eyebrow motion over time. An arc generator from D3's shape module renders the mouth path.

MMukund Khandelwal

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple smiley face from SVG shapes and animate its eyebrows using D3.js. The face is built with a yellow circle, two dark eyes, and a mouth drawn as an arc path, all grouped and positioned within an SVG canvas. A D3 transition with a two-second duration repeatedly moves the eyebrows up and down between two y-offsets, creating a subtle bobbing expression. The code relies on the `select`, `append`, `attr`, and `transition` APIs to manipulate the DOM directly.

Bbluesibra

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face, drawn with yellow circles and a black smile, animates by shifting its eyebrows upward and back down. The entire face is constructed in an SVG canvas using D3.js version 5, with the D3 selection and append API building the DOM elements. The eyebrows move through a chained sequence of D3 transitions, each lasting two seconds, which change the transform attribute of a group containing two rectangles. The mouth is generated using D3’s arc shape helper to create a path with specified inner and outer radii and angular range.

Ssara17585

91% match

Loading thumbnail…

Let's make a face with D3!

This D3.js example creates a cheerful yellow smiley face using SVG shapes, with animated eyebrows that rise and fall over time. The face is composed of circles for the eyes and head, rectangles for eyebrows, and a curved path for the mouth, all positioned and transformed within a central group. The animation utilizes chained `transition().duration()` calls to move the right eyebrow, while the left stays static. The visualization demonstrates fundamental D3 v5 operations like `select`, `append`, and `attr` for building and styling vector graphics.

MMichael Todd

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from SVG shapes. The face consists of a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based mouth, all positioned relative to an SVG group centered on the canvas. Using d3 selection and transition methods, the eyebrows perform a repeated up-and-down motion over two-second intervals. The code relies on d3.select, d3.arc for the mouth path, and chained transition.attrTween (via transition.attr) to animate the eyebrow group’s vertical offset, showcasing basic data-driven document updates without any external dataset.

Ttonestar

91% match