Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Chiasm Boilerplate

Public visualization

Chiasm Boilerplate

0 stars0🌍 Public
HHypercubed
Last edited Oct 20, 2015
Created on Oct 3, 2015

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 description

Boilerplate 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-layout A Chiasm plugin for nested box layout. You can use this plugin to impose a grid system of rectangles on any collection of Chiasm components.

  • coloredRectangle An example custom Chiasm component that draws a colored rectangle using D3.js and SVG. The naming convention of my for the component is inspired by the wonderful piece on reusable D3 charts Towards Reusable Charts.

  • downloadButton Based on coloredRectangle but 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.

MIT Licensed