Chiasm Foundation

An example that demonstrates basic features of Chiasm.

The Chiasm plugins demonstrated here are

dummyVis A placeholder for D3-based visualizations that use SVG.
wave An example plugin that uses HTML5 Canvas for rendering.
layout A plugin for nested box layout of arbitrary components.
links A plugin for connecting components together.

forked from curran's block: Chiasm Foundation

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

<script src="https://chiasm-project.github.io/chiasm/chiasm-v0.3.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.0.js"></script>

<script src="dummyVis.js"></script>

    <script src="wave.js"></script>

<style>

body {
        background-color: white;
      }

/* Make the chart container fill the page using CSS. */
      #chiasm-container {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }

.bar {
      fill: steelblue;
    }

.bar:hover {
      fill: brown;
    }

.axis {
      font: 10px sans-serif;
    }

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.x.axis path {
      display: none;
    }

</style>

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

var chiasm = Chiasm();

chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.dummyVis = DummyVis;
//       chiasm.plugins.dummy2 = Dummy2;
      chiasm.plugins.wave = Wave;

chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                {
                  "orientation": "horizontal",
                  "children": [
                    "A",
                    "B",
                    "C"
                  ]
                },
                {
                  "orientation": "horizontal",
                  "children": [
                    "E",
                    "F",
                    "G"
                  ]
                }
              ]
            }
          }
        },
        "A": {
          "plugin": "dummyVis",
          "state": {
            "text": "A",
            "color": "#a8ffd0"
          }
        },
        "B": {
          "plugin": "wave",
//           "state": {
//             "waterColor": "#005387",
//             "skyColor": "#7DCDFF"
//           }
        },
        "C": {
          "plugin": "dummyVis",
          "state": {
            "text": "C",
            "color": "#ffe2a8"
          }
        },
        "D": {
          "plugin": "dummyVis",
          "state": {
            "text": "D",
            "color": "#005387",
          }
        },
        "E": {
          "plugin": "dummyVis",
          "state": {
            "text": "E",
            "color": "#a8f0ff"
          }
        },
        "F": {
          "plugin": "dummyVis",
          "state": {
            "text": "F",
            "color": "#d18b00"
          }
        },
        "G": {
          "plugin": "dummyVis",
          "state": {
            "text": "G",
            "color": "#005387",
          }
        }
      });
    
    </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/chiasm-v0.3.0.js to a secure url

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

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

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

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://curran.github.io/model/cdn/model-v0.2.4.js

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

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

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

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