Smiley Face with D3.js

100%

Smiley Face with D3.js

✓ Published5🌍 Public

Last edited Dec 24, 2019

Created on Dec 24, 2019

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.

AI-generated description

Yifu's practice on making a smiley face with d3.js

Tutorial: https://www.youtube.com/watchv=_8V5o2UHG0E&t=1220s

Dec. 24, 2019

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

Smile face using D3.js

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.

AAbhishek Chandarana

93% match

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun

92% match

Loading thumbnail…

Smiley Face

This example draws a cheerful smiley face as a static SVG graphic, composed of a yellow circle, two elliptical eyes, rectangular eyebrows, and a curved mouth generated with the `d3.arc()` function. The figure is centered by translating a group element based on the SVG’s width and height. The right eyebrow animates by using D3’s `transition().duration()` to shift its vertical position, moving down and back up over two seconds.

Mmbergevoet

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple smiley face in an SVG canvas using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates basic DOM selection and manipulation via `d3.select` and `append`, alongside geometric positioning with `attr`. A notable feature is the animated eyebrows, which move up and down repeatedly using chained `transition().duration()` calls that alternate the group’s `transform` attribute. The example uses D3’s `arc` generator to draw the mouth and relies on plain SVG elements, showing how to combine static shapes with simple programmatic animation.

Cchenyucook

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

92% match