Fork of Let's make a face with D3.js!

100%

Fork of Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Mar 21, 2026

Created on Mar 21, 2026

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

This example displays a blank SVG canvas with a scripted attempt to create fruit objects using D3.js. The code imports `select` and `range` from `d3`, selects the SVG element, and uses `range(5)` to generate an array of five apple objects via `makeFruit`. It then logs the array to the console, but no visual face or fruit is rendered. The SVG remains empty, with the page styled by CSS that hides overflow and margins. The example relies on D3 v5 and the svg rendering framework.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a static SVG face created with D3.js v7. The code selects an SVG element using `d3.select` and reads its width and height attributes to establish the canvas dimensions. It defines a `makeFruit` function that returns objects with a type property, and creates an array containing a single apple fruit object. The sketch appears to be a starting point that sets up a face-like composition framework, though no actual facial features are drawn in the visible code. The HTML file links the D3 library and applies a monospace font to the page.

UuwFengyuan

92% match

Loading thumbnail…

Let's make a face with D3.js

A playful SVG face built from five apples, each represented as a circle with fixed facial features, demonstrates basic D3.js shape creation and data binding. The code uses `d3.select` and `d3.range` to generate an array of fruit objects, then renders them inside a static 960×500 SVG canvas. The face’s layout is hardcoded through SVG attributes rather than a force simulation or scales, and the styling relies on an external Ubuntu font and dark background. This example highlights how D3 v5 can manage simple data-to-element mappings without interactive transitions.

GGeolffrey S Mena

88% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A fork of "Let's make a face with D3.js!" demonstrates DOM manipulation by rendering five maroon circles as apples across an SVG canvas. The example shows how d3-select appends circles with fixed radii and positions using iterator indices. It uses D3 v5's `select` and `range` APIs to generate data, then applies `join` to bind circle elements, and finally removes exiting circles with `.exit().remove()`. The code illustrates basic data joins and enter/exit updates, though the initial face animation is not present in this version.

SSam Creasey

87% match

Loading thumbnail…

Let's make a face with D3.js!

Five D3-generated apples start as plain circles on an SVG canvas. Using data binding and `selection.enter()`, each fruit receives an interactive face made from additional circle elements, with positions tied to index-based spacing. The example demonstrates fundamental D3 v5 joins with `selectAll` and `attr` updates, rendering entirely through SVG as specified in the HTML document.

MMaarten van 't Wout

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

86% match

Loading thumbnail…

Let's make a face with D3.js

A single SVG contains a row of five red circles, representing apples, which are drawn using D3.js’s `select`, `range`, and `append` methods. The code initially renders all five fruits, then after a one-second timeout, it removes one from the end of the data array and re-renders the visualization. This shows how D3’s enter and exit selections manage dynamic updates to the scene, with the circle positions computed via an index-based formula. The example uses D3 v5 and the SVG rendering approach.

GGeolffrey S Mena

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

85% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a dynamic fruit bowl visualization rendered as SVG circles, showing five apples that shrink to four and transform one into a lemon through timed transitions. The code uses D3.js v5 selection methods (`selectAll`, `enter`, `merge`, `exit`) with the `fruitBowl` module applying ordinal scales for color and radius via `scaleOrdinal` from d3. Data updates occur through `setTimeout` callbacks in `index.js`.

GGeolffrey S Mena

85% match