Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published1🌍 Public
GGeolffrey S Mena
Last edited Dec 21, 2019
Created on Dec 21, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

Five red circles appear in a row on a dark blue canvas, resembling a simple face when viewed together. The example demonstrates the D3.js v5 selection API, using `select` to target the SVG element and the `range` function to create an array of fruit objects. The `render` function appends circles with the D3 `selectAll` and `data` methods, then removes one circle after the initial render by calling `fruits.pop()` and re-rendering, showing the exit selection in action. The rendering is SVG-based, with styling from the included stylesheet.

GGeolffrey S Mena
94% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to create a simple face-like pattern using D3.js by rendering five red circles across the center of an SVG canvas. The visualization uses fruit objects as the data source, with each fruit type assigned to a circle. The code leverages D3’s `select`, `range`, and `enter().append()` methods to bind data and generate circle elements, setting their `cx` positions based on index and `cy` to the vertical center. The resulting static composition highlights basic data-binding and SVG shape creation in D3 v5.

GGeolffrey S Mena
94% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple data-join workflow in D3.js, rendering a row of five red circles as “apples” and then removing them one by one over time. The code uses `d3.select`, `d3.range`, and the `data()` method with `enter()` and `exit()` selections to manage SVG circle elements dynamically. It also relies on `setTimeout` to trigger two successive updates, showing how `exit().remove()` cleans up removed data points. The visualization is rendered as an SVG inside a fullscreen, dark-themed page with large circular shapes.

GGeolffrey S Mena
92% 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
92% match
Loading thumbnail…

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.

ZZhang Shengli
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
90% 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
90% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how data binding and updates with D3 v5 can make a face out of fruit circles. The code uses `d3.select`, `scaleOrdinal` for color and radius, and joins circle elements to an array of fruit objects. Initially five apples render; after one second, a fruit is removed via `fruits.pop()`, and after two seconds, one apple becomes a lemon, updating the visualization with enter, update, and exit selections.

GGeolffrey S Mena
90% match