{"version":"1.0","type":"rich","title":"MZ Marks and Channels","description":"This example demonstrates six fundamental marks and channels in D3, each rendered as a separate SVG panel using `d3.select`, `selection.join`, and `selection.each`. It sequentially applies positional encodings (x, y), size (radius), bar length, shape via `d3.symbol` with contrasting symbols, and hue using `d3.schemeCategory10` color scheme. Each panel uses static synthetic data—an array [0,1,2,3,4]—and explicit pixel mappings for scales, with circles, rectangles, and paths drawn as SVG elements. The main `index.js` orchestrates multiple modules, importing named functions and binding them to data-driven SVG containers.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/609dd6776d284be7b8b4c26558ca3196?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}