Bowl of fruit - General Update Pattern

100%

Bowl of fruit - General Update Pattern

✓ Published2🌍 Public

Last edited Jun 5, 2020

Created on May 29, 2020

Five pieces of fruit are rendered as red circles in a green bowl, then updated through a general update pattern. Over timed intervals, an apple is removed, another changes to a yellow lemon with a black stroke, and a final apple is deleted. The code uses `d3.selectAll`, `data`, `enter`, `merge`, and `exit` with a key function based on random IDs. Scales from `d3.scaleOrdinal` map fruit types to colors, radii, and strokes, while SVG groups, circles, and text are joined and transformed.

AI-generated description

const fruits = range(5) .map(() => makeFruit("apple")); //function "fruits" makes an array of five "apples" apples = type svg.selectAll("circle").data(fruits) //D3 DataJoin https://www.amphinicy.com/blog/post/manipulating-svg-using-d3js-library //svg.selectAll("circle") makes an empty selection, as circles or elements are not defined yet. //.data(fruits) give the data, but it has to be an array .enter().append("circle") //.append gives all data, which has no elements an element, in this case a circle .attr("cx", (d, i) => i * 120 + 60) //d = data, i distance .attr("cy", height/2) .attr("r", 30) .attr("fill", "red");

import {select,range, scaleOrdinal } from "d3"

const svg = select("svg"); const width = +svg.attr("width"); const height = +svg.attr("height");

const colorScale = scaleOrdinal() .domain(["apple", "lemon"]) .range(["red", "yellow"])

const radiusScale = scaleOrdinal() .domain(["apple", "lemon"]) .range([50, 30])

const strokeScale = scaleOrdinal() .domain(["apple", "lemon"]) .range(["none", "black"])

const render = (selection, { fruits }) => { const circles = selection.selectAll("circle").data(fruits) //D3 DataJoin circles .enter().append("circle") .attr("cx", (d, i) => i * 120 + 60) //d = data, i distance .attr("cy", height/2) .merge(circles) .attr("fill", d => colorScale(d.type)) .attr("r", d => radiusScale(d.type)) circles //update, only lemon has stroke .attr("stroke", d => strokeScale(d.type)) circles .exit().remove() //apple in exit will be removed }

const makeFruit = type => ({ type}); //create new project,

const fruits = range(5) .map(() => makeFruit("apple")); //function "fruits" makes an array of five "apples" apples = type render(svg, {fruits});

//eat an apple setTimeout(() => { fruits.pop(); //last apple is selected render(svg, {fruits}); }, 1000 );

//replace an apple with a lemon setTimeout(() => { fruits[2].type = "lemon"; render(svg, {fruits}); }, 2000 );

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five pieces of fruit sit in a drawn bowl, rendered as SVG circles with labels. The example demonstrates the D3 general update pattern: entering, updating, and exiting selections manage changes to the fruit array over time, as apples are eaten and one apple is replaced by a lemon. The code uses `selection.enter()`, `selection.merge()`, and `selection.exit()` to handle dynamic data, with `d3.scaleOrdinal` mapping fruit types to colors and radii. Updates occur via `setTimeout` calls that modify the fruit data and re-render.

EEd Link III

95% match

Loading thumbnail…

Bowl of Fruit - General update pattern single element

Five apples sit in a bowl rendered as an SVG rectangle, with each fruit as a group containing a colored circle and label. D3's general update pattern removes, modifies, and re-adds elements over timed intervals: an apple disappears, a middle apple changes to a lemon, and another is filtered out. The code uses d3-selection’s `enter`, `merge`, and `exit` methods with ordinal scales for color and radius.

1123fischer

95% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples are rendered as red circles in an SVG, then one is removed and a lemon replaces another, turning it yellow. This demonstrates the general update pattern with enter, update, and exit selections. The code uses d3.select, data joins, scaleOrdinal for color and radius, and merge operations to handle state changes over time.

MMinwoo Pak

95% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern in D3. Five apples initially render as red circles, then transition through a sequence of updates: one apple is removed, a lemon turns yellow, and another apple is deleted. The example uses d3-selection's select and merge operations, along with d3.transition to animate shape attributes like radius and fill over one-second durations. The data is a simple in-memory array of fruit objects, rendered as SVG groups containing circles and text labels.

Jjhofang

95% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles are drawn as apples in a bowl, each at a fixed horizontal position. The visualization demonstrates the general update pattern: initially five apples appear, then the last is removed, the third apple changes into a lemon, and the second item is deleted. Using D3 v5’s `selectAll`, `data`, `enter`, `merge`, and `exit` methods within the custom `fruitBowl` function, the SVG circles transition smoothly. Ordinal color and radius scales map fruit types to specific colors and sizes, with data defined in `index.js`.

CCurran Kelleher

95% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples rendered as red circles transition in and out of a bowl over time, demonstrating the D3 general update pattern in SVG. The code uses `selectAll` and `.data()` joins, followed by `.enter()` and `.merge()` to handle entering and updating elements, while `.exit().remove()` removes disappearing fruits. A `scaleOrdinal` maps fruit types to colors and radii, with 1000ms transitions animating radius and fill changes as fruit is eaten, replaced by a lemon, or filtered out.

WWarren-Fitzhenry

95% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples render as red circles in an SVG bowl, then update through three timed steps: one apple exits, one turns yellow as a lemon, and another is removed. D3’s data join manages enter, update, and exit selections, using `scaleOrdinal` for color and radius, with `transition().duration(1000)` animating position and size changes.

LLucas Meirelles

95% match

Loading thumbnail…

Bowl of fruit - General Update Pattern

Five apples sit in a shallow bowl, each drawn as a circle with a label. The general update pattern animates sequential changes: one apple disappears, an apple transforms into a lemon, and another apple is removed. The example uses `d3.scaleOrdinal` for color and radius, differentiating fruit by type, and SVG rendering through D3 selections with enter, merge, and exit operations to manage the dynamic fruit bowl.

BbeauMarko

95% match