{"version":"1.0","type":"rich","title":"Marks and Channels","description":"This example illustrates the fundamental concept of encoding data through different visual channels—position, length, size, shape, and color—using D3.js. Five distinct marks, each with a static array of five data points, are rendered in separate panels to demonstrate how changing a single channel alters the representation of the same data. The code uses the D3 `select`, `join`, and `attr` API to build SVG circles, rectangles, and paths, applying `schemeCategory10` for categorical colors and custom functions for scaling and positioning.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/640617735bb84853a9123ae6cb1e89d4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}