Skip to content

Instantly share code, notes, and snippets.

@curran
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.
Chiasm Kitchen Sink

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.

/* 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;
};
});
<!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>
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"
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment