{"version":"1.0","type":"rich","title":"D3 join() example","description":"This example demonstrates how D3’s `join()` method synchronizes data with SVG rectangles, showing a bar chart of Nobel Prize winners by country. The code calls `updateBars()` three times—with ten, four, and two data items—to illustrate how the selection automatically handles entering, updating, and exiting elements. Using D3 v7’s `selection.join()`, it replaces the separate `enter()`, `update()`, and `exit()` workflows. Bars are styled via the `.bar` CSS class with a DarkSalmon fill, and the script logs each datum and index to the console.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/19322755fb004b26868fd7791c2ee827?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}