{"version":"1.0","type":"rich","title":"D3 Update Pattern –Punchcard Example","description":"A punchcard chart displays barley yield data across six sites, with each row representing a barley genotype and each column a year. Users select a site from a dropdown menu to trigger a smooth, 750-millisecond transition that updates the chart via the D3.js **v4** general update pattern. The visualization uses **d3.scalePoint** for axes, **d3.scaleSqrt** for circle radii, **d3.scaleOrdinal** with **d3.schemeCategory20b** for colors, and **d3.axisLeft**/ **d3.axisBottom** for rendering. Data from `barleyfull.csv` is loaded using **d3.csv** and processed with **d3.nest** and **d3.map**, with events handled via **d3.dispatch**.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5173aff2fd3346fca57832b453cf3fae?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}