Viewing a saved revision (read-only)
212fdec245634733b1642a54917e0acd
Bowl of fruit
This example shows three buttons labeled "Today," "This week," and "This month" inside a rounded rectangular bowl. Clicking a button updates its fill color from a bright green to a darker shade. The visualization demonstrates d3's data join concept by explicitly handling the enter, update, and exit states for both SVG groups and their child elements. It uses `scaleOrdinal` for colors and a custom `radiusScale`, while positioning elements with an `attr` transform based on their index.
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 */