Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Llystran
Last edited Apr 17, 2020
Created on Apr 17, 2020

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

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 demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Llystran
100% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Vveagy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by building a smiley face with animated eyebrows. The SVG circle face, eyes, and rectangular eyebrows are appended to a centered group element, while the mouth is drawn using the `d3.arc` path generator. Eyebrow movement is achieved through chained `transition` and `.attr` calls that shift the group’s transform over two-second intervals. The code relies on D3 v5 selections and transitions, rendering entirely as animated SVG without external data sources.

FFelipe Menegossi
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation using D3.js by creating a smiley face with animated eyebrows. The face is drawn with SVG shapes, including circles for the eyes and a path for the mouth, all positioned using D3's `select` and `append` methods. A `g` element transforms to center the face, while the eyebrows move up and down using chained `transition` calls over two seconds each, showing how D3 can animate attribute changes. The code uses D3 v5 and the `arc` shape generator for the mouth’s curved path.

CCurran Kelleher
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

Jjesramyep1263
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to demonstrate fundamental DOM manipulation by building a stylized smiley face from SVG shapes. The face features animated eyebrows that move up and down via chained `transition().duration()` calls on a group element, creating a dynamic expression. The code explicitly constructs each facial component—circle for the face, two eye circles, rectangular eyebrows, and an arc-based mouth path—using D3’s `select`, `append`, and `attr` methods within an SVG canvas. The `arc()` generator calculates the mouth’s path with specified inner and outer radii.

Vveagy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate up and down. The code uses `d3.select` to target an SVG element, `svg.append` to construct geometric shapes like rectangles and arcs, and `transition().duration()` to create a looping eyebrow movement over two seconds. The face is rendered as a static SVG with a semi-transparent green rectangle, red-stroked eyes, and a mouth drawn via the `d3.arc` shape generator, all centered using SVG group transforms.

NNikkor
96% match