Chiasm Boilerplate (with download buttons)

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.

web counter

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chiasm Boilerplate</title>

<script src="//curran.github.io/model/cdn/model-v0.2.4.js"></script>

<script src="//chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script>

<script src="coloredRectangle.js"> </script>
  <script src="downloadButton.js"> </script>

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<script src="//chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>

<script src="//chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>

<script src="//cdn.jsdelivr.net/gh/eligrey/filesaver.js/filesaver.js"></script>
  <script src="//cdn.jsdelivr.net/gh/hypercubed/svgsaver/v0.3.0/browser.min.js"></script>

<style>

body {
    background-color: black;
  }

#chiasm-container {
    background-color: white;
    position: fixed;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
  }

</style>
</head>
<body>

<div id="chiasm-container"></div>

<script>

// Create a new Chiasm instance.
    var chiasm = new Chiasm();

// Register plugins that the configuration can access.
    chiasm.plugins.layout = ChiasmLayout;
    chiasm.plugins.coloredRectangle = ColoredRectangle;
    chiasm.plugins.coloredButton = ColoredButton;

// Set the Chaism configuration.
    chiasm.setConfig({
      "layout": {
        "plugin": "layout",
        "state": {
          "containerSelector": "#chiasm-container",
          "layout": {
            "orientation": "vertical",
            "children": [
            "A", {
              "orientation": "horizontal",
              "children": [
              "B", {
                "orientation": "vertical",
                "children": [ "C", "D" ]
              },
              "E"
              ]
            }
            ]
          }
        }
      },
      "A": { "plugin": "coloredRectangle" },
      "B": {
        "plugin": "coloredRectangle",
        "state": { "color": "#a8f0ff" }
      },
      "C": {
        "plugin": "coloredButton",
        "state": {
          "color": "#ffe2a8",
          "text": "Click here to download SVG",
          "downloadAs": "SVG"
        }
      },
      "D": {
        "plugin": "coloredButton",
        "state": {
          "color": "#99e2c8",
          "text": "Click here to download PNG",
          "downloadAs": "PNG"
        }
      },
      "E": {
        "plugin": "coloredRectangle",
        "state": {
          "color": "#a8ffd0",
        }
      }
    });

// Here's a simpler configuration to try,
    // including just a single component instance.
    /*
    chiasm.setConfig({
    "layout": {
    "plugin": "layout",
    "state": {
    "containerSelector": "#chiasm-container",
    "layout": "visualization"
  }
},
"visualization": {
"plugin": "coloredRectangle",
"state": {
"color": "blue"
}
}
});
*/

</script>
</body>
</html>

Updated missing url //rawgit.com/eligrey/FileSaver.js/master/FileSaver.js to //cdn.jsdelivr.net/gh/eligrey/filesaver.js/filesaver.js

Updated missing url //rawgit.com/Hypercubed/svgsaver/v0.3.0/browser.min.js to //cdn.jsdelivr.net/gh/hypercubed/svgsaver/v0.3.0/browser.min.js

https://curran.github.io/model/cdn/model-v0.2.4.js

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js

https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js

https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js

https://rawgit.com/Hypercubed/svgsaver/v0.3.0/browser.min.js