Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

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

This example demonstrates fundamental D3.js data joins and DOM manipulation by rendering a row of five fruit-colored circles that update when data changes. It uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to map fruit types to colors, with `selection.enter()`, `merge()`, and `exit()` to handle adding, updating, and removing SVG circles. After an initial render, a pop removes one circle, and a subsequent change re-colors the middle circle from red to yellow, showing dynamic updates driven by array mutations.

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 DOM manipulation with D3.js by rendering five colored circles representing fruit, then updating the visualization over time. It shows how `d3.select`, `d3.range`, and `scaleOrdinal` map fruit types to fill colors and radii, with circles initially positioned using hard-coded attributes. The code then uses `setTimeout` to remove a circle after one second and change a circle’s type from apple to lemon after two seconds, triggering updates through a custom `render` function that handles enter, merge, and exit selections. The example is rendered as SVG in a 960×500 viewport.

Kkevgammer689

93% match

Loading thumbnail…

Let's make a face with D3.js

A D3.js v5 example demonstrates data-binding and enter/exit updates by rendering a row of fruit as SVG circles. Five apples appear initially, then one is removed after a second, and a third apple becomes a lemon after two seconds, illustrating dynamic updates to the DOM. Using `d3.select`, `scaleOrdinal`, and `range`, the code maps fruit types to fill colors and radii, with all circles positioned via `attr` and removed via `.exit().remove()`.

GGeolffrey S Mena

92% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates the fundamental D3.js data-join pattern by rendering a row of red circles that function as a face. The code uses `d3.select` and `d3.range` to generate an array of fruit objects, then binds that data to SVG circles with `selectAll().data().enter()`. After an initial render, `fruits.pop()` removes one data element, and the `exit()` selection turns that circle black to visualize the removal. The SVG canvas measures 960×500 pixels, with circles spaced 120 pixels apart.

GGeolffrey S Mena

92% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js selection demonstrates dynamic data binding by rendering fruit as SVG circles that appear, disappear, and change color. The data array starts with five apples, then removes one circle per second for three seconds, and finally replaces the first fruit with a lemon. The `data()`, `enter()`, and `exit()` methods manage the join, while `scaleOrdinal` maps fruit types to fill colors. The example uses `select`, `range`, and `attr` to manipulate the SVG canvas.

FFernando Godoy

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles, with a face-like arrangement created through D3.js data joins. The code uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to map fruit types to red and yellow colors and different radii. It demonstrates enter, update, and exit selections, first removing an apple, then replacing one with a lemon via `setTimeout`. The SVG output is generated from a simple `fruitBowl` function that binds fruit data to circles.

DDifan Gu

91% match

Loading thumbnail…

Let's make a face!

Five fruit circles appear in a row as apples, then one is removed and another turns into a lemon, demonstrating D3's enter, update, and exit selections. The example uses d3.scaleOrdinal to map fruit types to colors and radii, with selection.data and selection.enter handling the dynamic changes. Rendered as SVG circles on a 960 by 500 canvas, the visualization shows how data joins update the DOM over time through setTimeout callbacks.

Kkimgarrard

91% match

Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl demonstrates a data join pattern in D3.js, rendering five apples as circles with red fills inside a rounded rect bowl on an SVG canvas. The example uses `d3.scaleOrdinal` to map fruit types to colors and radii, and `selection.merge()` to update circles and text labels in place. Over timed intervals, the code removes fruits, replaces one apple with a lemon, and filters out another, showing how enter, update, and exit selections handle changing data.

Eemntd

91% match

Loading thumbnail…

Let's make a face with D3.js!

A bowl of fruit rendered as SVG circles demonstrates data joins with D3.js. The code uses `d3.scaleOrdinal` for color and radius, binding an array of fruit objects to `circle` elements via `selection.data`. After one second, `fruits.pop()` removes the last apple, triggering an exit transition; after two seconds, the third fruit’s type changes to lemon, updating its fill and size. The examples uses `selection.enter`, `merge`, and `exit` patterns to handle updates.

Eemntd

91% match