Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
GGloal
Last edited Aug 8, 2019
Created on Aug 8, 2019

D3.js builds a simple, interactive SVG smiley face whose eyebrows move. The example demonstrates core DOM manipulation by appending and positioning SVG shapes, including circles, a polygon, and a path. It uses D3's `select`, `attr`, and `append` methods to construct the face, while an `arc` shape generates the mouth. A linked video tutorial accompanies the code. The face is centered using an SVG group with a translate transform, and the styling is defined in a separate CSS file.

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 D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows in an SVG canvas. Using D3's `select` and `append` methods, the code creates and styles SVG circles and other elements dynamically. The example relies on D3 v5's modular imports and shows how to set attributes like radius and position through chained method calls. The accompanying video explains the step-by-step process, while the working code is rendered directly in the browser using standard SVG elements within a 960×500 viewport.

HHonza Cahlík
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn as an SVG graphic, with animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation with D3.js by selecting an `svg` element and using the `arc` generator from the `d3` module to create the face’s shapes. The code reads the SVG’s height and width attributes via `attr` and parseFloat, and browses over a simple dataset to bind elements. Rendering uses SVG paths, with styles applied through an external stylesheet that hides page overflow.

PPatrickHennessey
95% match
Loading thumbnail…

Let's make a face with D3 (following the video)

A smiley face drawn with SVG circles demonstrates fundamental D3.js DOM manipulation, with animated eyebrows that move via selection and attribute updates. The example uses D3 v5’s `select` and `append` methods to build the SVG structure, starting with a fixed-radius circle on a 960×500 canvas. It follows a tutorial video, showing how to create and style basic shapes programmatically, while the accompanying CSS hides page margins and overflow. No data source is involved; the focus is purely on interactive, code-driven drawing.

Ddmcgown3
95% 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 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic SVG manipulation by translating a group element to the canvas center and appending circles, rectangles, and an arc-generated mouth. The code uses d3.select and d3.arc to construct the face, with eyebrows positioned relative to eye spacing. A video tutorial explains how the interactive eyebrows move, though the static example itself only renders the fixed facial features.

Aaristidesnakos
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

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
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4
94% match