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.
| <!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> |
| // This program loads the configuration file called "visConfig.json". | |
| require(["d3", "chiasm/runtime"], function (d3, Runtime) { | |
| var runtime = Runtime(document.getElementById("container")); | |
| d3.json("visConfig.json", function (err, config) { | |
| runtime.config = config; | |
| }); | |
| }); |
| // This is the RequireJS configuration that sets up module paths. | |
| // | |
| // This file is documented here: | |
| // http://requirejs.org/docs/api.html#config | |
| // | |
| // Curran Kelleher March 2015 | |
| (function(){ | |
| // Use a fixed version of Chiasm, which provides the visualization runtime. | |
| var chiasmPath = "//curran.github.io/cdn/chiasm-v0.1.2/client/src"; | |
| // Here's how to can use a local development version | |
| // if this Gist is cloned into a sibling directory to the chiasm repo. | |
| //var chiasmPath = "../chiasm/client/src"; | |
| requirejs.config({ | |
| // Set up the Chiasm package. | |
| // https://github.com/curran/chiasm | |
| packages: [{ | |
| name: "chiasm", | |
| location: chiasmPath + "/core" | |
| }], | |
| // Set up paths for Bower dependencies. | |
| // Uses github.com/curran/cdn | |
| paths: { | |
| // Visualization library. | |
| // http://d3js.org/ | |
| d3: "//curran.github.io/cdn/d3-v3.5.5/d3.min", | |
| // Reactive model library. | |
| // https://github.com/curran/model | |
| model: "//curran.github.io/cdn/model-v0.2.0/dist/model", | |
| // Functional programming utilities. | |
| // http://benmccormick.org/2014/11/12/underscore-vs-lodash/ | |
| lodash: "//curran.github.io/cdn/lodash-v3.5.0/lodash.min", | |
| // Asynchronous control flow. | |
| // https://github.com/caolan/async | |
| async: "//curran.github.io/cdn/async-v0.9.2/lib/async", | |
| // Syntax-highlighted text editor for code. | |
| // http://codemirror.net/ | |
| codemirror: "//curran.github.io/cdn/codemirror-v5.0.0", | |
| // Provides interactive color picker and slider for CodeMirror. | |
| // https://github.com/enjalot/Inlet.git | |
| inlet: "//curran.github.io/cdn/inlet/inlet", | |
| // Configure paths for plugins loaded at runtime. | |
| plugins: chiasmPath + "/plugins" | |
| } | |
| }); | |
| })(); |
| { | |
| "layout": { | |
| "plugin": "layout", | |
| "state": { | |
| "layout": { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "editor", | |
| { | |
| "orientation": "vertical", | |
| "children": [ | |
| "A", | |
| { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "B", | |
| "C" | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| "editor": { | |
| "plugin": "configEditor", | |
| "state": { | |
| "size": "400px" | |
| } | |
| }, | |
| "A": { | |
| "plugin": "dummyVis", | |
| "state": { | |
| "text": "A", | |
| "color": "#a8ffd0" | |
| } | |
| }, | |
| "B": { | |
| "plugin": "dummyVis", | |
| "state": { | |
| "text": "B", | |
| "color": "#a8f0ff", | |
| "size": 2 | |
| } | |
| }, | |
| "C": { | |
| "plugin": "dummyVis", | |
| "state": { | |
| "text": "C", | |
| "color": "#ffe2a8" | |
| } | |
| } | |
| } |
