Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Rrenjiez
Last edited Jul 26, 2020
Created on Jul 26, 2020

This example demonstrates how D3.js can create a smiling face with animated, moving eyebrows. It shows fundamental DOM manipulation by using `d3.select`, `d3.range`, and `d3.scaleOrdinal` to bind and update data-driven SVG elements. The `fruitBowl` function manages enter, update, and exit selections with `transition().duration()` for smooth changes, while the eyebrow animation is driven by JavaScript `setTimeout` calls that modify the fruit array and re-render.

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

Let's make a face with D3.js!

This interactive D3.js example demonstrates DOM manipulation by rendering a smiley face as a fruit bowl, with apples and lemons positioned as facial features and animated eyebrows that move when the data changes. The visualization uses `scaleOrdinal` color and radius scales to map fruit types to visual properties, while the `fruitBowl` function manages SVG elements through selection and transition methods. The code animates fruit appearance, removal, and type changes over timed intervals, showing how D3's `.transition().duration()` API creates smooth updates when the underlying data array is modified.

Hhuankoh
93% match
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
92% match
Loading thumbnail…

Let's make a face with D3.js!

A face built from D3.js selections animates its eyebrows and changes expression, demonstrating how data-driven DOM updates work with SVG. The example transitions fruit-bowl shapes through enter, update, and exit cycles using `selection.data`, `selection.enter`, `selection.merge`, and `groups.exit().remove()`, with `d3.transition` handling smooth movement. It applies ordinal scales (`scaleOrdinal`) for fruit colors and radii, and dynamic transforms position elements by index. Timers (`setTimeout`) trigger data changes—removing fruits, swapping types, and filtering—to show how state changes render, all rendered as SVG circles and text.

Ccpsshan
92% 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
92% 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 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.

SShantanu Tripathi
91% match
Loading thumbnail…

Let's make a face with D3.js!

This D3.js example creates a smiling face inside an SVG canvas and animates its eyebrows with a bouncing motion. The visualization demonstrates fundamental DOM manipulation, using `d3.select` to target the SVG element and directly adding and transforming facial features. It relies on plain SVG shapes—circles, paths, and lines—that are dynamically positioned and rotated over time to produce the playful eyebrow movement. The underlying data consists of fixed coordinates for facial components, with the animation driven by JavaScript’s own timing rather than any external dataset, showcasing D3’s utility for basic graphic construction without data mapping.

Wwen787
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiling face and animating its eyebrows. The code appends SVG shapes—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—using D3’s `select` and `append` methods. The eyebrows move via chained `transition()` calls with a two-second duration, shifting their vertical position and then returning. The scene is rendered in an SVG canvas with a 960 by 500 coordinate space, centered through a transform.

SSandyWu7179290504
90% match