{"version":"1.0","type":"rich","title":"D3 Course 6: Interaction with Unidirectional Data Flow","description":"This example demonstrates interactive selection and highlighting of fruit marks in an SVG bowl using unidirectional data flow. Clicking or hovering a circle triggers callbacks that update the selected or hovered fruit ID, which then re-renders the bowl with the appropriate stroke color—black for clicked, orange for hovered. The code uses d3.scaleOrdinal for color and radius mapping, d3.select for data joins with enter/merge/exit, and d3 transitions to animate circle radius changes over one second. The fruit data is generated with d3.range and random IDs, with timed updates removing or replacing fruits.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"","width":960,"height":500,"cache_age":3600}