D3 Examples - Chiasm Boilerplate

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chiasm Boilerplate</title>
    
    <!-- Load the Chiasm stack. -->
    <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>
    
        
    <!-- This script defines our custom component. -->
    <script src="coloredRectangle.js"> </script>
​
    <!-- Make the container fill the page and have a 20px black border. -->
    <style>
​
      body {
        background-color: black;
      }
​
      #chiasm-container {
        background-color: white;
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }
​
    </style>
  </head>
  <body>
​
    <!-- Chiasm component DOM elements will be injected into this div. -->
    <div id="chiasm-container"></div>
    
    <!-- This is the main program that sets up the Chiasm application. -->
    <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>
​
    