Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Ssethips
Last edited Oct 4, 2019
Created on Oct 4, 2019

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

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 constructing an animated smiley face in an SVG. The code uses `d3.select` to append circles for the eyes, rectangles for the eyebrows, and an `arc()` generator for the mouth. A chained `transition()` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showcasing simple animation. The face is centered with a `g` element, and all shapes are drawn using D3’s SVG helper methods.

JJun Yi | Dylan
97% 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 basic SVG shapes, including a red circle head, eyes, and a mouth. The visualization showcases animated eyebrows that move up and down using D3 transitions, with the `select` and `append` APIs building the SVG hierarchy. The code uses `d3.select` to target the SVG element, `attr` to set properties like coordinates and dimensions, and `arc` to generate the mouth path. The animation runs through chained `transition()` calls with specified durations, highlighting D3's ability to animate SVG attributes over time.

Vvunturi
97% 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 DOM manipulation with D3.js by building an animated smiley face from SVG shapes. It shows how to append and style circles for the face and eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows use chained `transition` calls to move up and down over two-second intervals, while the face is centered using a `g` element with a `translate` transform. The code imports `select` and `arc` from D3 and renders entirely in SVG.

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

An animated smiley face demonstrates fundamental DOM manipulation and transitions with D3.js v5. The face consists of SVG shapes, including a circle, eyes, rectangular eyebrows, and a path-based mouth. The eyebrows move up and down using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, uses the `svg` selection to set up the coordinate system, and generates the mouth path with the `arc` API.

Vveagy
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes, including pink circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate by moving downward and upward repeatedly using chained `transition()` calls with `duration(1000)`. The example demonstrates basic DOM manipulation with `d3.select`, shape generation via `d3.arc`, and attribute setting on SVG elements.

Ggrandbleu916
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face. The face is built from SVG shapes, including circles for the eyes and a path for the mouth, all grouped and positioned within an SVG canvas. The animation shows the eyebrows moving up and down over time. The code uses D3's `select`, `append`, `attr`, and `transition` APIs to create and animate the elements.

Mmeihaoming
96% match