Malcolm Mason Rodriguez

@malcolmjmr·2 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a “bowl of fruit” animation that transitions through a sequence of data updates using the general update pattern. It shows how entering, updating, and exiting SVG elements behave in special cases, such as reordering, replacing, and removing data points. The visualization uses D3 v5 with a `scaleOrdinal` color scale and radius scale, while `selection.data()`, `selection.enter()`, and `selection.exit()` manage circles and labels. Each fruit type—apple, lemon, and pear—renders as a colored circle with a text label, updated at timed intervals via `setTimeout`.

Jul 21, 2019

Loading thumbnail…

Bowl of Fruit - Click to Select

Five red apples sit in a row, each represented as a colored circle whose radius and fill come from d3 ordinal scales. Clicking a fruit highlights it with a black outline, updating a selected state managed through React’s useState. The visualization renders as SVG, and the code includes commented-out d3 transitions that would animate position or removal over 1000 milliseconds, though these are not active.

Jul 21, 2019