Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

hover to select

Public visualization

hover to select

0 stars1🌍 Public
JJenny
Last edited Jul 14, 2019
Created on Jul 11, 2019

Hovering over a fruit circle highlights it in light blue while showing its selection state. The example demonstrates a unidirectional data flow pattern, where mouse events trigger a state change that re-renders the SVG. Using d3.v5's data join, circles transition their radius and position over one second with `transition().duration(1000)`. The `fruitBowl` module applies ordinal color and radius scales to map apple and lemon types to distinct visual properties, while `setSelectedFruit` updates the selected state on mouseover and mouseout.

AI-generated description

Using unidirectional data flow to make a eventlistener, change state, and update pattern

Comments

Sign in to join the discussion.

MIT Licensed