Chiasm Boilerplate

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.

For a more complex example that creates data visualizations, check out Fundamental Visualizations.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chiasm Boilerplate</title>
    
    
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://chiasm-project.github.io/chiasm/chiasm-v0.3.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
    
        
    
    <script src="coloredRectangle.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;

// 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": "coloredRectangle",
          "state": { "color": "#ffe2a8" }
        },
        "D": {
          "plugin": "coloredRectangle",
          "state": { "color": "#99e2c8" }
        },
        "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>

Modified http://curran.github.io/model/cdn/model-v0.2.4.js to a secure url

Modified http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.3.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.3.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js to a secure url

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

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.3.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.3.0.js

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