{"version":"1.0","type":"rich","title":"quick example of nested elements from one data set","description":"This example shows two alternative ways to render the same dataset as two sets of rectangles along shared axes. The nested version first creates a group element for each data point, then appends one rectangle scaled by the primary y-scale and another by the secondary y2-scale within each group. The non-nested version instead selects separate rectangle classes, binding the data twice and assigning each class its own scale. Both approaches use D3.js selection methods such as `selectAll`, `data`, `enter`, and `append`, with `attr` setting positions and sizes based on an x index and the y or y2 scales.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-7c90b742717785630091bce6d074d072?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}