Chiasm Boilerplate
This example shows a Chiasm application that divides the screen into a hierarchical grid of colored rectangles, each of which changes color when clicked. The Chiasm framework coordinates the layout, while the `chiasm-layout` plugin computes nested boxes and the custom `coloredRectangle` component uses D3.js to render and transition rectangle fills. The code sets up five interactive rectangles in a treemap-like arrangement, with each click triggering a smooth color transition via D3's `transition().duration(500)`.
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.
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=1948664&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
Comments
Sign in to join the discussion.