Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vvoiletymr
Last edited Dec 2, 2018
Created on Dec 2, 2018

This example draws a yellow smiley face with D3.js, including eyes, a mouth, and animated eyebrows. The code demonstrates basic DOM manipulation by selecting an SVG element and appending shapes like circles, rectangles, and an arc-based mouth path. D3 v5’s `transition()` method moves the eyebrows up and down over repeated two-second intervals. The face is centered using an SVG group with a translated transform, and all geometry is defined by explicit pixel constants.

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!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn inside an SVG using D3.js v5. The code creates the face’s head, eyes, and mouth with `select`, `append`, and `arc` for the smile path. Eyebrows are rectangles whose vertical position animates in a loop via chained `transition().duration()` calls, moving up and down. The example demonstrates fundamental DOM manipulation and data-driven shape generation without external data, relying solely on the D3 library.

Mmin
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG shapes with D3.js v5, including two eyes, a mouth created via the `d3.arc` generator, and rectangular eyebrows. The eyebrows animate upward and back down over two sequential two-second `transition` calls on their containing group’s `transform` attribute. The code demonstrates fundamental DOM manipulation by selecting the root `svg` element, appending groups, and positioning shapes with absolute coordinates derived from the viewport dimensions.

Jjunge870214
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js version 5 to construct a yellow smiley face with eyes, eyebrows, and a mouth directly in an SVG. It demonstrates fundamental DOM manipulation by selecting elements, appending shapes, and applying attributes. The code uses `d3.select` and `d3.arc` to generate the mouth path, while a two-stage `transition()` chain animates the eyebrows upward and then back to their original position over 4 seconds.

Eevesshaw
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with a black outline and three eyes is drawn using D3.js. The shape is assembled from SVG circles, rectangles, and arc-generated paths for the nose and mouth. The code uses d3.select, d3.arc, and chained transitions to animate the eyebrows, which move upward and then back down over a two-second duration. The example demonstrates basic DOM manipulation and SVG rendering with D3 v5.

DDimitarDraganov
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
97% match