Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Topologica Experiment

✓ Published0🌍 Public
Ccodexmon
Last edited Jun 29, 2020
Created on Jun 29, 2020

Five apples appear as red circles in a row, then one is removed and another becomes a yellow lemon, with a black outline on hover. Built with Topologica and D3 v5, the visualization demonstrates declarative incremental updates: the `fruitBowl` component uses `selection.selectAll` and `merge` to add, modify, and remove SVG circles based on dataflow state. Interactions trigger `mouseover` and `mouseout` events, updating the `hoveredIndex` through Topologica's event-driven dataflow.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Topologica Experiment

This example demonstrates a dynamic "Bowl of Fruit" graphic where apples and lemons are represented as colored circles. The visualization uses D3.js and the Topologica library for reactive dataflow, updating the SVG display in response to timed events and user hovering. The code initializes five fruit circles, then removes one apple, and later replaces another apple with a lemon, while a custom color scale and radius scale map fruit types to visual attributes. It also adjusts stroke styling based on hovered index to highlight the selected fruit.

CCurran Kelleher
94% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five SVG circles enter the scene as red apples, then sequence through timed updates: an apple disappears, another turns into a yellow lemon, and a third is removed. Hovering over any fruit selects it with a black outline, using mouseover and mouseout events to toggle the selection state. Fruit positions and radii come from ordinal scales mapping fruit type to color and size, while entering and exiting circles animate through chained transitions that adjust radius over one second. The visualization uses D3 v5 with data joins keyed by unique id.

DDi Zhen
91% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a bowl, rendered as red circles with labels; hovering over a fruit highlights it with a black stroke, and selecting triggers updates. Over three seconds, the data changes: an apple is eaten, one becomes a yellow lemon, and another is removed, showing animated transitions. Built with d3 v5, it uses selection joins, `scaleOrdinal` for color and radius, and SVG circles, rects, and text elements within a single `<g>` per fruit.

MMiish84
90% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of five apples is rendered as SVG circles, and hovering over a fruit highlights it with a black stroke while clearing the selection on mouseout. The visualization animates state changes over time as apples are removed or replaced with lemons, using smooth transitions to shrink exiting circles and resize new ones. Built with D3 v5, it employs `scaleOrdinal` for color and radius mapping, data joins with key functions, and transition methods to update circle positions and sizes across a 960 by 500 canvas.

HHelenaShu
90% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj
90% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five fruit circles, initially apples, animate into a bowl formation. Hovering over a circle selects it, drawing a black outline, while the selection state and data updates are logged. The visualization uses d3.js v5 with ordinal scales for color and radius, and employs transition-based enter, update, and exit animations for data changes. It demonstrates dynamic data manipulation by removing fruits and changing an apple to a lemon.

EEdoardoRegini
90% match
Loading thumbnail…

Bowl of fruit - hover to select

Five apples in a bowl render as SVG circles whose size and color map to fruit type via `d3.scaleOrdinal`. Hovering over a fruit calls the `setSelectedFruit` prop, redrawing the selection with a black stroke. Using D3 v5 data joins and `transition`, the visualization animates changes over time—removing fruit, replacing an apple with a lemon, and deleting another—while text labels update via `.merge()` on enter/update selections.

WWhitney Hung
90% match
Loading thumbnail…

Bowl of Fruit — Hover to Select

Five apples and one lemon appear as circles in a bowl, with a dark outline highlighting whichever fruit is hovered. The visualization uses D3 v5’s data joins and ordinal scales to map fruit type to color and radius, while transitions animate shapes smoothly over one second. Repeated renders via `setTimeout` remove fruits and change an apple to a lemon, demonstrating enter, update, and exit selections in SVG.

MMuhammad Jarir Kanji
90% match