Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Ccpsshan
Last edited Jul 15, 2019
Created on Jul 15, 2019

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.

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

Let's make a face with D3.js!

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.

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

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation in D3.js by rendering a smiley face from an array of fruit objects. The visualization starts with five red circles representing apples, positioned horizontally across an SVG canvas, then removes the last fruit from the data array, causing the corresponding circle to turn black through the exit selection. The code uses D3’s `select`, `range`, data joins with `enter` and `exit` methods, and SVG circle attributes to show how data bindings drive visual updates. The rendering is entirely SVG-based, with a fixed 960×500 viewport.

Bbo-nathaniel
92% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js v5 example demonstrates how to create and update a row of fruit circles in an SVG, transforming them into a smiley face whose eyebrows move. It shows the data join pattern by entering, updating, and exiting circles. The code imports `select`, `range`, and `scaleOrdinal` from D3, using ordinal scales to map fruit types to colors and radii. Over timed `setTimeout` calls, it removes a fruit and changes one apple to a lemon, re-rendering the visualization each time.

JjimacDS
92% match