Let's make a face with D3.js!

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates basic D3.js DOM manipulation, with animated eyebrows that move to change the expression. The example uses D3 v5's `select` and `arc` functions to construct the facial features, building circles and arcs for the eyes, mouth, and brows within an SVG canvas. The code shows how D3 can directly create and update SVG elements through its data-binding and selection APIs, while the accompanying stylesheet hides page overflow for a clean, focused presentation.

MMarian

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. It shows how to append and position circles, rectangles, and an arc-generated mouth path using selections and attribute setters. The code imports `select` and `arc` from d3 and uses template literals for transform translations, creating static facial features with fixed dimensions. The face includes yellow head circle, spaced eyes, rectangular eyebrows, and a curved mouth via d3's arc generator, all rendered in SVG on a 960×500 canvas.

Aaristidesnakos

Let's make a face with D3.js!

Aaristidesnakos

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 demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. A single circle is appended to the SVG canvas and positioned at the center with a radius of 225 pixels, though its fill is left undefined. The code uses the D3 v5 selection and append methods (`select`, `append`) to build the shape step-by-step, revealing how D3’s API interacts with SVG elements. The static face serves as a starting point for interactive features shown in an accompanying video.

FFred Kellner

Let's make a face with D3.js!

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.

Ssethips

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG elements, including a polygon for the nose and animated eyebrows. It uses d3.select, append, and attr methods to build the face centered within an SVG canvas. The code imports the select and arc functions from D3 v5, and sets up a transformation group to position elements relative to the center of the 600×400 viewport. The result shows how D3’s data-driven approach can create simple, interactive graphics through direct SVG manipulation.

CCameron Yick

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu