A demo of the Chiasm visualization runtime engine.
Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
A data visualization editor.
Curran Kelleher March 2015
-->
<title>Visualization Editor</title>
<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">
<link rel="stylesheet" href="axes.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>
/* Style the axes and labels for visualizations.
Curran Kelleher March 2015 */
/* Tick mark labels */
.axis .tick text {
font: 8pt sans-serif;
}
/* Axis labels */
.axis text {
font: 14pt sans-serif;
}
/* Lines within axes. */
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: black;
stroke-width: 1.5px;
}
/* Style the title text at the top of the visualization. */
.title-text {
text-anchor: middle;
font: 20pt sans-serif;
}
// 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/core";
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"
}
});
})();
letter,frequency
A,30
B,20
C,10
timestamp,temperature
2015-03-10T22:00:00.000Z,19.09
2015-03-10T23:00:00.000Z,18.87
2015-03-11T00:00:00.000Z,18.90
2015-03-11T01:00:00.000Z,18.16
2015-03-11T02:00:00.000Z,17.80
2015-03-11T03:00:00.000Z,17.27
2015-03-11T04:00:00.000Z,17.19
2015-03-11T05:00:00.000Z,17.36
2015-03-11T06:00:00.000Z,17.45
2015-03-11T07:00:00.000Z,17.22
2015-03-11T08:00:00.000Z,17.28
2015-03-11T09:00:00.000Z,17.37
2015-03-11T10:00:00.000Z,17.44
2015-03-11T11:00:00.000Z,17.60
2015-03-11T12:00:00.000Z,17.81
2015-03-11T13:00:00.000Z,17.96
2015-03-11T14:00:00.000Z,18.08
2015-03-11T15:00:00.000Z,18.55
2015-03-11T16:00:00.000Z,19.46
2015-03-11T17:00:00.000Z,20.78
2015-03-11T18:00:00.000Z,22.19
2015-03-11T19:00:00.000Z,22.64
2015-03-11T20:00:00.000Z,23.07
2015-03-11T21:00:00.000Z,23.62
2015-03-11T22:00:00.000Z,23.89
2015-03-11T23:00:00.000Z,22.65
2015-03-12T00:00:00.000Z,22.29
2015-03-12T01:00:00.000Z,20.23
2015-03-12T02:00:00.000Z,19.24
2015-03-12T03:00:00.000Z,19.00
2015-03-12T04:00:00.000Z,19.02
2015-03-12T05:00:00.000Z,18.73
2015-03-12T06:00:00.000Z,18.54
2015-03-12T07:00:00.000Z,18.16
2015-03-12T08:00:00.000Z,17.78
2015-03-12T09:00:00.000Z,17.69
2015-03-12T10:00:00.000Z,17.38
2015-03-12T11:00:00.000Z,17.12
2015-03-12T12:00:00.000Z,16.81
{
"layout": {
"plugin": "layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
{
"orientation": "vertical",
"children": [
"barChart",
"lineChart"
]
}
]
}
}
},
"editor": {
"plugin": "configEditor",
"state": {
"size": "325px"
}
},
"barChart": {
"plugin": "barChart",
"state": {
"xColumn": "letter",
"xAxisLabel": "Letter",
"yColumn": "frequency",
"yAxisLabel": "Frequency",
"sortColumn": "frequency",
"sortOrder": "descending",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"colorDefault": "#059e00",
"title": "Bar Chart",
"titleOffset": -0.269568,
"yDomainMin": 0
}
},
"lineChart": {
"plugin": "lineChart",
"state": {
"xColumn": "timestamp",
"xAxisLabel": "Time",
"yColumn": "temperature",
"yAxisLabel": "Temperature",
"margin": {
"top": 30,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"colorDefault": "#0074db",
"title": "Line Chart",
"titleOffset": -0.30433148928
}
},
"barChartCSVLoader": {
"plugin": "csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"lineChartCSVLoader": {
"plugin": "csvLoader",
"state": {
"csvPath": "simpleTime.csv",
"numericColumns": [
"temperature"
],
"timeColumns": [
"timestamp"
]
}
},
"links": {
"plugin": "links",
"state": {
"bindings": [
"barChartCSVLoader.data -> barChart.data",
"lineChartCSVLoader.data -> lineChart.data"
]
}
}
}