Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Jul 1, 2020

Created on Jun 30, 2020

Forked from Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face in an SVG canvas, with animated eyebrows that respond to a timer. The code uses `d3.select` and `d3.append` to build the face’s elements, while `setTimeout` and a `render` function update the positions of the eyebrows over time. It also illustrates data-binding through a mutable `fruits` array, where elements are removed or change type, triggering re-renders that reflect those updates in the SVG. The example relies on D3 v5’s core selection and data-join methods rather than any external data source, focusing purely on interactive, time-driven graphic changes.

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 from SVG circles, with animated eyebrows that move. The code uses D3 v5’s `select`, `range`, and data joins to bind an array of five fruit objects to circles, setting position and fill attributes. The rendering is pure SVG, created through `.enter().append('circle')` on an empty selection. The eyebrows are implied through the data structure, though the visible output focuses on the static face layout.

Aa-ydobon

94% 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, with animated eyebrows that move upward and downward. The face is drawn entirely through D3 selections and attribute assignments, using `d3.select` to target the SVG element and chain methods like `.append` and `.attr` to build the circles and lines. The eyebrows animate via a recurring `setInterval` that toggles their vertical position, showcasing how D3 can update existing elements. Rendering is purely SVG-based, with styling handled by an external stylesheet that hides overflow for a clean presentation.

Ssathesujit

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face using D3.js, with interactive eyebrows that move to create an expressive animation. It showcases fundamental DOM manipulation by binding an array of fruit objects to SVG circles using `select`, `data`, and `enter`. The visualization uses D3 v5 and SVG rendering, with the face elements positioned across a 960×500 coordinate space, and includes a video tutorial explaining the construction process.

Lleothimoteo

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an interactive smiley face by manipulating SVG elements, with animated eyebrows that move over time. The code uses `d3.select` and `selection.data` to bind fruit-shaped data to SVG circles and text, while `transition.attr` animates their positions and radii. A fruit bowl is rendered as an SVG rectangle, and ordinal scales like `scaleOrdinal` map fruit types to colors and sizes. The face updates through timed intervals that add, remove, or alter data, showcasing D3’s enter, update, and exit pattern.

Ccpsshan

93% match

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

93% 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

92% match

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. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

Wwen787

92% match

Loading thumbnail…

Let's make a face with D3.js! Now

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with moving eyebrows. The page renders an SVG canvas with a red background, and the face is constructed using D3 selection methods. The code uses `d3.select` to target the SVG element, while `bundle.js` likely contains additional logic for animating the eyebrows. The example showcases how D3’s data-binding and attribute manipulation work in a playful, visual context, with the SVG serving as the primary rendering surface for the interactive facial features.

Rrcumani

92% match