Viewing a saved revision (read-only)
39ad509cab2545d1bde9351647276036
Boll of fruit - click to select
Five apples appear as circles whose size and color encode fruit type, and a black or white stroke highlights the user-selected fruit. Clicking a circle updates the selection with a one-second transition that animates circle radius and position. The example demonstrates D3's data join model by explicitly handling enter, update, and exit states through `selectAll`, `.data`, `.enter`, `.merge`, and `.exit`, using `scaleOrdinal` for color and radius scales.
AI-generated description/* When we call selectAll and data, we create a "data join", we join data (in this case our 5 apples (array) and some elements (DOM elements in this case: our circle)
We have 3 case > Enter : we only have data, no elements
Update : we have both data and elements Exit : we only have elements but no data
In d3 we need to explicitly call thos 3 functions (.enter, .update, .exit)
selectAll give the elements part, .data give the data (always an array)
thanks to that d3 know exactly how much element are on the enter, update and exit */