{"version":"1.0","type":"rich","title":"Chiasm Boilerplate","description":"This example demonstrates a minimal Chiasm application with two custom components: a colored rectangle and a download button. The colored rectangle component, defined in `coloredRectangle.js`, uses D3.js to draw an SVG rectangle whose fill color changes to a random RGB value on click. The download button component, based on the rectangle, triggers SVG or PNG export of the visualization using the `svgsaver` library. The `chiasm-layout` plugin arranges these components within a nested box layout, enabling dynamic resizing and positioning. The page is styled with a black background and a white container with a fixed black border, showcasing how Chiasm can compose reusable, interactive data-driven components. The example is intended as a starting point for building custom Chiasm components and applications, and includes the necessary dependencies for a functional reactive model, D3.js, and the Chiasm framework.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/gist-b01a767b41b0e679aade?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}