Chiasm Boilerplate
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.
AI-generated descriptionBoilerplate starter code for Chiasm.
To get started, go ahead and edit this example on blockbuilder.org. From there you can experiment with creating your own Chiasm components and applications, then publish your work back to bl.ocks.org.
The Chiasm components demonstrated here are:
chiasm-layoutA Chiasm plugin for nested box layout. You can use this plugin to impose a grid system of rectangles on any collection of Chiasm components.coloredRectangleAn example custom Chiasm component that draws a colored rectangle using D3.js and SVG. The naming convention ofmyfor the component is inspired by the wonderful piece on reusable D3 charts Towards Reusable Charts.downloadButtonBased oncoloredRectanglebut with an interface to svgsaver.
For a more complex example that creates data visualizations, check out Fundamental Visualizations.
<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1959129&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a><br><a href="http://www.simplehitcounter.com" target="_blank" style="text-decoration:none;">web counter</a></div> <!-- End of SimpleHitCounter Code -->







Comments
Sign in to join the discussion.