Face with d3.js!

Face visualization with D3

This example builds a smiling face using D3 v5, rendered as an animated SVG. It constructs the head, eyes, eyebrows, and mouth from primitive shapes, with the eyebrows performing a looping vertical bounce via chained `transition` calls. The code uses D3’s `select` and `arc` APIs directly, setting shape attributes like `r`, `cx`, and `cy` to position elements relative to the SVG’s center. The face’s layout is defined by constants for eye spacing and offsets, demonstrating a simple, reusable composition pattern.

PPavel Antoshkin

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv

Let's make a face with D3.js!

This example creates a smiling face from basic SVG shapes, with its eyebrows repeatedly moving up and down. It demonstrates fundamental D3.js DOM manipulation by appending and styling circles, rectangles, and a path for the mouth. The code uses `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The face is centered via a translated `<g>` element, with eye spacing and offsets defined as numeric constants.

MMartin Lord

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

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

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Ssslee8778960

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, manipulating SVG elements such as circles, rectangles, and paths. The face has two eyes and eyebrows that move up and down in a looping transition, while a fixed mouth is drawn using a D3 arc generator. The code uses D3 selections and the `transition` API with `duration` to animate the eyebrow group’s transform attribute, showcasing fundamental DOM manipulation. Rendered entirely in SVG, the face is centered within a 960×500 viewport, with styling defined in a separate CSS file.

RRena Patel