{"version":"1.0","type":"rich","title":"Nested Data Join for Each Parent Element but with Different Data","description":"This example demonstrates a nested data join where each parent table header element binds to a sub-array of data, creating child elements with different values. Using D3 v6’s `selectAll().data()` pattern, the code first joins `topData` to header cells, then re-joins each header’s `div.th-inner` with entries from `newData`. Child `div.th-but` elements are appended with checkboxes and spans, each bound to individual sub-data items, illustrating how to manage varying child data per parent.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/fec8fc477fd74f21b948f80df05ebd37?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}