<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Interactive Scatterplot</title>
<!-- Load the Chiasm stack. -->
<script src="http://curran.github.io/model/cdn/model-v0.2.4.js"></script>
<script src="http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://chiasm-project.github.io/chiasm/chiasm-v0.3.0.js"></script>
<script src="http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
<script src="http://chiasm-project.github.io/chiasm-dataset-loader/chiasm-dataset-loader-v0.3.1.js"></script>
<script src="http://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js"></script>
<script src="http://chiasm-project.github.io/chiasm-charts/chiasm-charts-v0.1.0.js"></script>
<!-- Make the container fill the page and have a 20px black border. -->
<style>
body {
background-color: black;
}
#chiasm-container {
background-color: white;
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
.axis {
font: 0.8em sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/* Custom CSS for axis labels. */
.axis-label {
text-anchor: middle;
font-size: 2em;
}
</style>
</head>
<body>
<!-- Chiasm component DOM elements will be injected into this div. -->
<div id="chiasm-container"></div>
<!-- Define a custom Chaism component for selecting columns. -->
<script>
function ColumnSelector() {
var my = ChiasmComponent();
var div = my.initDIV();
var select = d3.select(div).append("select");
var supportedTypes = [{
type: "number",
interval: false
}];
my.when(["dataset", "selected"], function (dataset, selected){
var columns = dataset.metadata.columns.filter(function (column){
return supportedTypes.some(function (supported){
return (
(supported.type === column.type)
&&
((!!supported.interval) === (!!column.interval))
);
});
});
var options = select.selectAll(".column-option").data(columns);
options.enter().append("option").attr("class", "column-option");
options.exit().remove();
options
.attr("value", function (d){ return d.name; })
.text(function (d){ return d.label; });
select.node().value = selected;
// TODO get rid of this hack.
// https://github.com/chiasm-project/chiasm-charts/issues/13
my.selectedLabel = dataset.metadata.columns.filter(function (d){
return d.name === selected;
})[0].label;
});
select.on("change", function (){
my.selected = this.value;
console.log("d");
});
return my;
}
</script>
<!-- This is the main program that sets up the Chiasm application. -->
<script>
// Create a new Chiasm instance.
var chiasm = new Chiasm();
// Register plugins that the configuration can access.
chiasm.plugins.layout = ChiasmLayout;
chiasm.plugins.links = ChiasmLinks;
chiasm.plugins.datasetLoader = ChiasmDatasetLoader;
chiasm.plugins.scatterPlot = ChiasmCharts.components.scatterPlot;
chiasm.plugins.columnSelector = ColumnSelector;
// Set the Chaism configuration.
chiasm.setConfig({
"layout": {
"plugin": "layout",
"state": {
"containerSelector": "#chiasm-container",
"layout": {
"orientation": "vertical",
"children": [
{
"orientation": "horizontal",
"size": "15px",
"children": [
"yColumnSelector",
"xColumnSelector"
]
},
"vis"
]
}
}
},
"loader": {
"plugin": "datasetLoader",
"state": {
"path": "auto-mpg"
}
},
"vis": {
"plugin": "scatterPlot",
"state": {
"xColumn": "mpg",
"yColumn": "weight",
"xAxisLabelTextOffset": 40,
"yAxisLabelTextOffset": 50,
"margin": { top: 10, right: 10, bottom: 50, left: 80 },
// TODO get rid of this hack.
// https://github.com/chiasm-project/chiasm-charts/issues/13
"xAxisLabelText": "Sepal Length",
"yAxisLabelText": "Petal Length"
}
},
"xColumnSelector": { "plugin": "columnSelector" },
"yColumnSelector": { "plugin": "columnSelector" },
"myLinks": {
"plugin": "links",
"state": {
"bindings": [
"loader.dataset -> vis.dataset",
"loader.dataset -> xColumnSelector.dataset",
"loader.dataset -> yColumnSelector.dataset",
"vis.xColumn <-> xColumnSelector.selected",
"vis.yColumn <-> yColumnSelector.selected",
// TODO get rid of this hack.
// https://github.com/chiasm-project/chiasm-charts/issues/13
"xColumnSelector.selectedLabel -> vis.xAxisLabelText",
"yColumnSelector.selectedLabel -> vis.yAxisLabelText"
]
}
}
});
chiasm.getComponent("myScatterPlot").then(function (scatterPlotDataLoader){
console.log(scatterPlotDataLoader)
scatterPlotDataLoader.when("dataset", function(dataset){
console.log(dataset)
});
});
</script>
</body>
</html>