graph2.js!

100%

✓ Published2🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

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

This example uses D3.js (v5) to draw an animated smiley face in SVG. It shows a yellow circle with two eyes and a mouth, whose eyebrows move up and down via chained `transition()` calls. The code constructs the face using `select`, `append`, and `attr`, and generates the mouth path with the `arc` API. The animation runs on page load with a 2-second duration per eyebrow movement.

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

91% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc path for the mouth. The most notable behavior is an animated eyebrow movement, achieved by chaining `transition().duration(2000)` calls to shift the eyebrow group’s `transform` attribute up and back down. The code demonstrates fundamental DOM manipulation via `select` and `append`, and uses the `arc` generator to define the mouth’s path.

Kkestefon

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with black outlined eyes and a curved mouth, which animates by moving its eyebrows up and down over a two-second cycle. The face is drawn using D3.js v5, with an SVG circle for the head, rectangles for the eyebrows, and a path generated via `arc()` for the mouth. The eyebrow movement uses chained `transition().duration()` calls on an SVG group, illustrating fundamental DOM manipulation techniques with `select` and `append`.

VVidhuS

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

91% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver

91% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG circle with animated eyebrows made of rectangles. The eyebrows transition upward and then return to their original position over two seconds each using D3's `transition()`. The face is built with D3 selections, appending elements like `circle`, `rect`, and `path`, while the mouth uses the `arc()` generator. Data is hardcoded in `index.js`, and the visualization runs entirely in the browser with D3 v5.

Ccodexmon

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js v5 can manipulate SVG elements to create an animated smiley face. It shows fundamental DOM selection and appending via `d3.select`, `d3.arc` for the mouth path, and `transition.attr` to animate the eyebrows by shifting their vertical offset over two 2-second intervals. The face is rendered as a yellow circle with black strokes, positioned using SVG transformations, with rectangles acting as eyebrows that move up and down while the eyes and mouth remain static.

SSillySuperhero21

91% match