This is a “kitchen sink” demo of the Chiasm visualization runtime engine. It contains various configurations that are loaded at runtime, showing various Chiasm plugins and how they can be used.
Press any key to stop the automated configuration changes.
<!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>
/* Position the dropdown menu at the top of the page. */
#dropdown {
position: fixed;
left: 2px;
top: 2px;
}
/* Make the container fill the page. */
#container {
position: fixed;
left: 0px;
right: 0px;
top: 20px;
bottom: 0px;
}
</style>
</head>
<body>
<!-- The dropdown menu for selecting a configuration to load. -->
<div id="dropdown"></div>
<!-- The container for the runtime environment. -->
<div id="container"></div>
<!-- Use RequireJS for module loading. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.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;
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": "barChart"
}
},
"barChart": {
"plugin": "chiasm/plugins/barChart",
"state": {
"xColumn": "letter",
"xAxisLabel": "Letter",
"yColumn": "frequency",
"yAxisLabel": "Frequency",
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"colorDefault": "#059e00",
"title": "Bar Chart",
"titleOffset": -0.269568,
"yDomainMin": 0
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"barChartCSVLoader.data -> barChart.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
{
"orientation": "vertical",
"children": [
"barChart",
"lineChart"
]
}
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"barChart": {
"plugin": "chiasm/plugins/barChart",
"state": {
"xColumn": "letter",
"xAxisLabel": "Letter",
"yColumn": "frequency",
"yAxisLabel": "Frequency",
"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": "chiasm/plugins/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": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"lineChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleTime.csv",
"numericColumns": [
"temperature"
],
"timeColumns": [
"timestamp"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"barChartCSVLoader.data -> barChart.data",
"lineChartCSVLoader.data -> lineChart.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
{
"orientation": "vertical",
"children": [
"barChart",
"lineChart"
]
}
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"barChart": {
"plugin": "chiasm/plugins/barChart",
"state": {
"xColumn": "letter",
"xAxisLabel": "Letter",
"yColumn": "frequency",
"yAxisLabel": "Frequency",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"colorDefault": "#009e73",
"title": "Hello",
"titleOffset": -0.269568,
"yDomainMin": 0
}
},
"lineChart": {
"plugin": "chiasm/plugins/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": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"lineChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleTime.csv",
"numericColumns": [
"temperature"
],
"timeColumns": [
"timestamp"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"barChartCSVLoader.data -> barChart.data",
"lineChartCSVLoader.data -> lineChart.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
{
"orientation": "vertical",
"children": [
"barChart",
"lineChart"
]
}
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"barChart": {
"plugin": "chiasm/plugins/barChart",
"state": {
"xColumn": "letter",
"xAxisLabel": "Letter",
"yColumn": "frequency",
"yAxisLabel": "Frequency",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"colorDefault": "#009e73",
"title": "Hello",
"titleOffset": -0.269568,
"yDomainMin": 0,
"size": 3
}
},
"lineChart": {
"plugin": "chiasm/plugins/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": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"lineChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleTime.csv",
"numericColumns": [
"temperature"
],
"timeColumns": [
"timestamp"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"barChartCSVLoader.data -> barChart.data",
"lineChartCSVLoader.data -> lineChart.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": "lineChart"
}
},
"lineChart": {
"plugin": "chiasm/plugins/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
}
},
"lineChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleTime.csv",
"numericColumns": [
"temperature"
],
"timeColumns": [
"timestamp"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"lineChartCSVLoader.data -> lineChart.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12,
"colorDefault": "#d16100"
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"colorColumn": "class",
"colorDomain": [
"Iris-setosa",
"Iris-versicolor",
"Iris-virginica"
],
"colorRange": [
"#adadad",
"#969696",
"#000000"
],
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"colorColumn": "class",
"colorDomain": [
"Iris-setosa",
"Iris-versicolor",
"Iris-virginica"
],
"colorRange": [
"#f66464",
"#02e837",
"#00a6f9"
],
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "sepal_width",
"yAxisLabel": "Sepal Width",
"colorColumn": "class",
"colorDomain": [
"Iris-setosa",
"Iris-versicolor",
"Iris-virginica"
],
"colorRange": [
"#f66464",
"#02e837",
"#00a6f9"
],
"sizeColumn": "petal_length",
"sizeMin": 4,
"sizeMax": 22,
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "sepal_length",
"xAxisLabel": "Sepal Length",
"yColumn": "petal_length",
"yAxisLabel": "Petal Width",
"colorColumn": "class",
"colorDomain": [
"Iris-setosa",
"Iris-versicolor",
"Iris-virginica"
],
"colorRange": [
"#f66464",
"#02e837",
"#00a6f9"
],
"sizeColumn": "petal_length",
"sizeMin": 4,
"sizeMax": 22,
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
{
"layout": {
"plugin": "chiasm/plugins/layout",
"state": {
"layout": {
"orientation": "horizontal",
"children": [
"editor",
"scatterPlot"
]
}
}
},
"editor": {
"plugin": "chiasm/plugins/configEditor",
"state": {
"size": "325px"
}
},
"scatterPlot": {
"plugin": "chiasm/plugins/scatterPlot",
"state": {
"xColumn": "petal_width",
"xAxisLabel": "Petal Width",
"yColumn": "petal_length",
"yAxisLabel": "Petal Length",
"colorColumn": "class",
"colorDomain": [
"Iris-setosa",
"Iris-versicolor",
"Iris-virginica"
],
"colorRange": [
"#f66464",
"#02e837",
"#00a6f9"
],
"sizeColumn": "petal_length",
"sizeMin": 4,
"sizeMax": 14,
"margin": {
"top": 32,
"right": 2,
"bottom": 40,
"left": 47
},
"xAxisLabelOffset": 1.9,
"yAxisLabelOffset": 1.4,
"title": "Iris",
"titleOffset": -0.269568,
"sizeDefault": 12
}
},
"barChartCSVLoader": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"iris": {
"plugin": "chiasm/plugins/csvLoader",
"state": {
"csvPath": "iris.csv",
"numericColumns": [
"sepal_length",
"sepal_width",
"petal_length",
"petal_width"
]
}
},
"links": {
"plugin": "chiasm/plugins/links",
"state": {
"bindings": [
"iris.data -> scatterPlot.data"
]
}
}
}
// This is a dropdown menu module.
define(["model"], function (Model){
return function Dropdown(containerNode){
var container = d3.select(containerNode),
menu = container.append("select"),
model = Model();
model.when("data", function (data){
var options = menu.selectAll("option").data(data);
options.enter().append("option");
options
.attr("value", function(d){ return d.name; })
.text(function(d){ return d.label; });
options.exit().remove();
});
menu.on("change", function(d){
model.selectedValue = this.value;
});
model.when("selectedValue", function (selectedValue){
menu.node().value = selectedValue;
});
return model;
};
});
sepal_length,sepal_width,petal_length,petal_width,class
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3.0,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5.0,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa
4.6,3.4,1.4,0.3,Iris-setosa
5.0,3.4,1.5,0.2,Iris-setosa
4.4,2.9,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.4,3.7,1.5,0.2,Iris-setosa
4.8,3.4,1.6,0.2,Iris-setosa
4.8,3.0,1.4,0.1,Iris-setosa
4.3,3.0,1.1,0.1,Iris-setosa
5.8,4.0,1.2,0.2,Iris-setosa
5.7,4.4,1.5,0.4,Iris-setosa
5.4,3.9,1.3,0.4,Iris-setosa
5.1,3.5,1.4,0.3,Iris-setosa
5.7,3.8,1.7,0.3,Iris-setosa
5.1,3.8,1.5,0.3,Iris-setosa
5.4,3.4,1.7,0.2,Iris-setosa
5.1,3.7,1.5,0.4,Iris-setosa
4.6,3.6,1.0,0.2,Iris-setosa
5.1,3.3,1.7,0.5,Iris-setosa
4.8,3.4,1.9,0.2,Iris-setosa
5.0,3.0,1.6,0.2,Iris-setosa
5.0,3.4,1.6,0.4,Iris-setosa
5.2,3.5,1.5,0.2,Iris-setosa
5.2,3.4,1.4,0.2,Iris-setosa
4.7,3.2,1.6,0.2,Iris-setosa
4.8,3.1,1.6,0.2,Iris-setosa
5.4,3.4,1.5,0.4,Iris-setosa
5.2,4.1,1.5,0.1,Iris-setosa
5.5,4.2,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.0,3.2,1.2,0.2,Iris-setosa
5.5,3.5,1.3,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
4.4,3.0,1.3,0.2,Iris-setosa
5.1,3.4,1.5,0.2,Iris-setosa
5.0,3.5,1.3,0.3,Iris-setosa
4.5,2.3,1.3,0.3,Iris-setosa
4.4,3.2,1.3,0.2,Iris-setosa
5.0,3.5,1.6,0.6,Iris-setosa
5.1,3.8,1.9,0.4,Iris-setosa
4.8,3.0,1.4,0.3,Iris-setosa
5.1,3.8,1.6,0.2,Iris-setosa
4.6,3.2,1.4,0.2,Iris-setosa
5.3,3.7,1.5,0.2,Iris-setosa
5.0,3.3,1.4,0.2,Iris-setosa
7.0,3.2,4.7,1.4,Iris-versicolor
6.4,3.2,4.5,1.5,Iris-versicolor
6.9,3.1,4.9,1.5,Iris-versicolor
5.5,2.3,4.0,1.3,Iris-versicolor
6.5,2.8,4.6,1.5,Iris-versicolor
5.7,2.8,4.5,1.3,Iris-versicolor
6.3,3.3,4.7,1.6,Iris-versicolor
4.9,2.4,3.3,1.0,Iris-versicolor
6.6,2.9,4.6,1.3,Iris-versicolor
5.2,2.7,3.9,1.4,Iris-versicolor
5.0,2.0,3.5,1.0,Iris-versicolor
5.9,3.0,4.2,1.5,Iris-versicolor
6.0,2.2,4.0,1.0,Iris-versicolor
6.1,2.9,4.7,1.4,Iris-versicolor
5.6,2.9,3.6,1.3,Iris-versicolor
6.7,3.1,4.4,1.4,Iris-versicolor
5.6,3.0,4.5,1.5,Iris-versicolor
5.8,2.7,4.1,1.0,Iris-versicolor
6.2,2.2,4.5,1.5,Iris-versicolor
5.6,2.5,3.9,1.1,Iris-versicolor
5.9,3.2,4.8,1.8,Iris-versicolor
6.1,2.8,4.0,1.3,Iris-versicolor
6.3,2.5,4.9,1.5,Iris-versicolor
6.1,2.8,4.7,1.2,Iris-versicolor
6.4,2.9,4.3,1.3,Iris-versicolor
6.6,3.0,4.4,1.4,Iris-versicolor
6.8,2.8,4.8,1.4,Iris-versicolor
6.7,3.0,5.0,1.7,Iris-versicolor
6.0,2.9,4.5,1.5,Iris-versicolor
5.7,2.6,3.5,1.0,Iris-versicolor
5.5,2.4,3.8,1.1,Iris-versicolor
5.5,2.4,3.7,1.0,Iris-versicolor
5.8,2.7,3.9,1.2,Iris-versicolor
6.0,2.7,5.1,1.6,Iris-versicolor
5.4,3.0,4.5,1.5,Iris-versicolor
6.0,3.4,4.5,1.6,Iris-versicolor
6.7,3.1,4.7,1.5,Iris-versicolor
6.3,2.3,4.4,1.3,Iris-versicolor
5.6,3.0,4.1,1.3,Iris-versicolor
5.5,2.5,4.0,1.3,Iris-versicolor
5.5,2.6,4.4,1.2,Iris-versicolor
6.1,3.0,4.6,1.4,Iris-versicolor
5.8,2.6,4.0,1.2,Iris-versicolor
5.0,2.3,3.3,1.0,Iris-versicolor
5.6,2.7,4.2,1.3,Iris-versicolor
5.7,3.0,4.2,1.2,Iris-versicolor
5.7,2.9,4.2,1.3,Iris-versicolor
6.2,2.9,4.3,1.3,Iris-versicolor
5.1,2.5,3.0,1.1,Iris-versicolor
5.7,2.8,4.1,1.3,Iris-versicolor
6.3,3.3,6.0,2.5,Iris-virginica
5.8,2.7,5.1,1.9,Iris-virginica
7.1,3.0,5.9,2.1,Iris-virginica
6.3,2.9,5.6,1.8,Iris-virginica
6.5,3.0,5.8,2.2,Iris-virginica
7.6,3.0,6.6,2.1,Iris-virginica
4.9,2.5,4.5,1.7,Iris-virginica
7.3,2.9,6.3,1.8,Iris-virginica
6.7,2.5,5.8,1.8,Iris-virginica
7.2,3.6,6.1,2.5,Iris-virginica
6.5,3.2,5.1,2.0,Iris-virginica
6.4,2.7,5.3,1.9,Iris-virginica
6.8,3.0,5.5,2.1,Iris-virginica
5.7,2.5,5.0,2.0,Iris-virginica
5.8,2.8,5.1,2.4,Iris-virginica
6.4,3.2,5.3,2.3,Iris-virginica
6.5,3.0,5.5,1.8,Iris-virginica
7.7,3.8,6.7,2.2,Iris-virginica
7.7,2.6,6.9,2.3,Iris-virginica
6.0,2.2,5.0,1.5,Iris-virginica
6.9,3.2,5.7,2.3,Iris-virginica
5.6,2.8,4.9,2.0,Iris-virginica
7.7,2.8,6.7,2.0,Iris-virginica
6.3,2.7,4.9,1.8,Iris-virginica
6.7,3.3,5.7,2.1,Iris-virginica
7.2,3.2,6.0,1.8,Iris-virginica
6.2,2.8,4.8,1.8,Iris-virginica
6.1,3.0,4.9,1.8,Iris-virginica
6.4,2.8,5.6,2.1,Iris-virginica
7.2,3.0,5.8,1.6,Iris-virginica
7.4,2.8,6.1,1.9,Iris-virginica
7.9,3.8,6.4,2.0,Iris-virginica
6.4,2.8,5.6,2.2,Iris-virginica
6.3,2.8,5.1,1.5,Iris-virginica
6.1,2.6,5.6,1.4,Iris-virginica
7.7,3.0,6.1,2.3,Iris-virginica
6.3,3.4,5.6,2.4,Iris-virginica
6.4,3.1,5.5,1.8,Iris-virginica
6.0,3.0,4.8,1.8,Iris-virginica
6.9,3.1,5.4,2.1,Iris-virginica
6.7,3.1,5.6,2.4,Iris-virginica
6.9,3.1,5.1,2.3,Iris-virginica
5.8,2.7,5.1,1.9,Iris-virginica
6.8,3.2,5.9,2.3,Iris-virginica
6.7,3.3,5.7,2.5,Iris-virginica
6.7,3.0,5.2,2.3,Iris-virginica
6.3,2.5,5.0,1.9,Iris-virginica
6.5,3.0,5.2,2.0,Iris-virginica
6.2,3.4,5.4,2.3,Iris-virginica
5.9,3.0,5.1,1.8,Iris-virginica
// This program loads the configuration file called "visConfig.json".
require(["d3", "chiasm", "./dropdown"], function (d3, Chiasm, Dropdown) {
// Instantiate the Chiasm chiasm environment.
var chiasm = Chiasm(document.getElementById("container"));
// Set up the dropdown menu to load different configurations.
var dropdown = Dropdown(document.getElementById("dropdown"));
// Set up the dropdown with the list of configuration files.
dropdown.data = [
{ name: "configBarChart", label: "Bar Chart" },
{ name: "configLineChart", label: "Line Chart" },
{ name: "configBarLineEditor", label: "Bar Chart and Line Chart With Editor" },
{ name: "configBarLineEditor2", label: "Bar Chart and Line Chart With Editor 2" },
{ name: "configBarLineEditor3", label: "Bar Chart and Line Chart With Editor 3" },
{ name: "configScatterPlot", label: "Scatter Plot" },
{ name: "configScatterPlot2", label: "Scatter Plot 2" },
{ name: "configScatterPlot3", label: "Scatter Plot 3" },
{ name: "configScatterPlot4", label: "Scatter Plot 4" },
{ name: "configScatterPlot5", label: "Scatter Plot 5" },
{ name: "configScatterPlot6", label: "Scatter Plot 6" },
{ name: "configScatterPlot7", label: "Scatter Plot 7" },
{ name: "configScatterPlot8", label: "Scatter Plot 8" }
];
// Cache configurations so they are not loaded more than once.
var getConfig = (function (){
var cache = {};
return function(configName, callback){
if(configName in cache){
callback(cache[configName]);
} else {
d3.json(configName + ".json", function (err, config) {
callback(cache[configName] = config);
});
}
};
}());
// When the user selects a configuration, load it.
dropdown.when("selectedValue", function(configName){
getConfig(configName, function(config){
chiasm.config = config;
});
});
// Initialize the selected value.
dropdown.selectedValue = dropdown.data[0].name;
// Scroll through all available configurations when any key is pressed.
var i = 0;
function nextConfig(){
i = (i + 1) % dropdown.data.length;
dropdown.selectedValue = dropdown.data[i].name;
}
function prevConfig(){
i = (i - 1 + dropdown.data.length) % dropdown.data.length;
dropdown.selectedValue = dropdown.data[i].name;
}
var interval = setInterval(nextConfig, 2000);
document.addEventListener("keydown", function(e){
// Use right arrow key to scroll through configs.
var RIGHT_ARROW = 39;
var LEFT_ARROW = 37;
if(e.keyCode === RIGHT_ARROW){
nextConfig();
} else if(e.keyCode === LEFT_ARROW){
prevConfig();
}
// When any key is pressed, stop automated scrolling through configs.
clearInterval(interval);
});
});
// 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.8/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/src/";
var plugins = chiasmPath + "plugins/";
requirejs.config({
// Set up paths for Bower dependencies.
// Uses github.com/curran/cdn
paths: {
// Set up the Chiasm path.
// https://github.com/curran/chiasm
chiasm: chiasmPath + "chiasm",
"chiasm/plugins": chiasmPath + "plugins",
// Visualization library.
// http://d3js.org/
d3: "//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min",
// Reactive model library.
// https://github.com/curran/model
model: "//curran.github.io/cdn/model-v0.2.1/dist/model",
// Functional programming utilities.
// http://benmccormick.org/2014/11/12/underscore-vs-lodash/
lodash: "//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min",
// Asynchronous control flow.
// https://github.com/caolan/async
async: "//cdnjs.cloudflare.com/ajax/libs/async/0.9.0/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",
}
});
})();
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",
"pieChart"
]
}
]
}
}
},
"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
}
},
"pieChart": {
"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
}
},
"dataLoader": {
"plugin": "csvLoader",
"state": {
"csvPath": "simpleBars.csv",
"numericColumns": [
"frequency"
]
}
},
"links": {
"plugin": "links",
"state": {
"bindings": [
"dataLoader.data -> barChart.data",
"dataLoader.data -> pieChart.data"
]
}
}
}