D3 Examples - Chiasm Layout Example

Chiasm Layout Example

A demo of the Chiasm visualization runtime engine. Demonstrates the nested box layout and basic setup.

Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. Also, click and drag the X lines in the dummy visualizations to see the changes propagate to the configuration.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--
      A data visualization editor.
      Curran Kelleher March 2015
    -->
    <title>Visualization Editor</title>
​
    <!-- Use CSS required for Inlet and CodeMirror. -->
    <link rel="stylesheet" href="//curran.github.io/cdn/inlet/inlet.css">
    <link rel="stylesheet" href="//curran.github.io/cdn/codemirror-v5.0.0/lib/codemirror.css">
​
    <style>
​
      /* Make the container fill the page. */
      #container {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>
  </head>
  <body>
​
    <!-- The container for the runtime environment. -->
    <div id="container"></div>
​
    <!-- Use RequireJS for module loading. -->
    <script src="//curran.github.io/cdn/requirejs-v2.1.16/require.js"></script>
​
    <!-- Configure AMD modules. -->
    <script src="requireJSConfig.js"></script>
​
    <!-- Run the main program. -->
    <script src="main.js"></script>
​
  </body>
</html>
​
    