Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Hhuankoh
Last edited Oct 21, 2020
Created on Oct 20, 2020

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.

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

Let's make a face with D3.js

This example demonstrates how D3.js can animate changes to a fruit bowl visualization over time, showing apples and lemons as colored circles on an SVG canvas. The fruitBowl module uses d3.scaleOrdinal to map fruit types to colors and radii. Through d3.select and data joins, the code updates the scene at one-second intervals, removing a fruit, changing one apple to a lemon, and filtering out another item. The visualization highlights D3's enter, merge, and exit selections for dynamic data binding.

GGeolffrey S Mena
92% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates D3.js update patterns for animating changes to a fruit bowl. Apples and lemons transition smoothly when fruits are removed or change type, with circles scaling and repositioning over one-second intervals. The `fruitBowl` module uses `scaleOrdinal` for color and radius mapping, while `transition().duration(1000)` animates enter, update, and exit selections. Data binds to SVG groups via `selection.data` with an id-based key function, and JavaScript `setTimeout` triggers the staged modifications.

GGeolffrey S Mena
92% match
Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl visualization demonstrates data binding and transitions with D3.js. Rendered as SVG, it shows apples and lemons as circles with color and size scales, positioned along a bowl-shaped rectangle. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to update elements, with `transition()` animating position changes. Over time, fruits are removed and one apple changes to a lemon, illustrating dynamic updates. The implementation relies on D3 v5 modules `scaleOrdinal`, `range`, and `select`, with state managed via `setTimeout` in the main script.

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

The visualization demonstrates a fruit bowl that animates over time as apples are eaten and one apple transforms into a lemon, using D3.js v5 with an SVG rendering approach. The code leverages D3's scaleOrdinal for both color and radius mappings, and uses a declarative merge-based selection pattern to update SVG elements efficiently. A bowl shape is drawn with a `rect` element, while fruit are represented as circles with text labels, and timed `setTimeout` calls trigger state changes to the data array.

RRoger Yu-Hsiang Lo
92% match