Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active August 29, 2015 14:18
Show Gist options
  • Save curran/70ae30ab3b3eea62f84e to your computer and use it in GitHub Desktop.
Save curran/70ae30ab3b3eea62f84e to your computer and use it in GitHub Desktop.
Download ZIP
Chiasm Kitchen Sink
Raw
README.md

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.

Raw
axes.css
/* 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;
}
Raw
configBarChart.json
{
"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"
]
}
}
}
Raw
configBarLineEditor.json
{
"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"
]
}
}
}
Raw
configBarLineEditor2.json
{
"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"
]
}
}
}
Raw
configBarLineEditor3.json
{
"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"
]
}
}
}
Raw
configLineChart.json
{
"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"
]
}
}
}
Raw
configScatterPlot.json
{
"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"
]
}
}
}
Raw
configScatterPlot2.json
{
"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"
]
}
}
}
Raw
configScatterPlot3.json
{
"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"
]
}
}
}
Raw
configScatterPlot4.json
{
"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"
]
}
}
}
Raw
configScatterPlot5.json
{
"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"
]
}
}
}
Raw
configScatterPlot6.json
{
"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"
]
}
}
}
Raw
configScatterPlot7.json
{
"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"
]
}
}
}
Raw
configScatterPlot8.json
{
"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"
]
}
}
}
Raw
dropdown.js
// 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;
};
});
Raw
index.html
<!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>
Raw
iris.csv
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
Raw
main.js
// 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);
});
});
Raw
requireJSConfig.js
// 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",
}
});
})();
Raw
simpleBars.csv
letter frequency
A 30
B 20
C 10
Raw
simpleTime.csv
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
Raw
visConfig2.json
{
"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"
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment