D3 Examples - Chiasm Boilerplate (with download buttons)

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chiasm Boilerplate</title>
​
  <!-- A functional reactive model library. See github.com/curran/model -->
  <script src="//curran.github.io/model/cdn/model-v0.2.4.js"></script>
​
  <!-- The common base for Chiasm components (depends on Model.js). -->
  <script src="//chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script>
​
  <!-- This script defines the ColoredRectangle component. -->
  <script src="coloredRectangle.js"> </script>
  <script src="downloadButton.js"> </script>
​
  <!-- Chiasm.js depends on Model.js, Lodash.js, D3.js. -->
  <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>
​
  <!-- Load Chiasm.js. See github.com/chiasm-project -->
  <script src="//chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
​
  <!-- Load the nested box layout plugin. See https://github.com/chiasm-project/chiasm-layout -->
  <script src="//chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
​
  <!-- Load FileSaver and svgsaver -->
  <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>
​
  <!-- Make the Chiasm 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;
    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>
​
    