DC.js - Scatter Plot Not Updating
by DJ Martin
HTML
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<div id="rowChart" />
<div id="scatterPlot" />
JavaScript
var chartExample = {
initChart: function (experiments) {
var rowChart = dc.rowChart("#rowChart");
var scatterChart = dc.scatterPlot("#scatterPlot");
experiments.forEach(function (x) {
x.Speed = +x.Speed;
});
var ndx = crossfilter(experiments),
typeDimension = ndx.dimension(function (d) {
return d.Type;
}),
runDimension = ndx.dimension(function (d) {
return +d.Run;
}),
speedSumGroup = runDimension.group().reduceSum(function (d) {
return d.Speed * d.Run / 1000;
});
rowChart.width(500)
.height(200)
.margins({
top: 5,
left: 10,
right: 10,
bottom: 20
})
.dimension(runDimension)
.group(speedSumGroup)
.colors(d3.scale.category10())
.elasticX(true)
.xAxis().ticks(4);
var runDimension2 = ndx.dimension(function (d) {
return [+d.Run, +d.Expt];
}),
speedSumGroup2 = runDimension2.group().reduceSum(function (d) {
return d.Run;
});
scatterChart.width(500)
.height(200)
.x(d3.scale.linear().domain([0, 4]))
.elasticX(true)
.dimension(runDimension2)
.group(speedSumGroup2);
dc.renderAll();
typeDimension.filter("foo");
dc.redrawAll();
},
initData: function () {
var experiments = [];
experiments.push({Type: "foo", Expt: 1, Run: 1, Speed: 700});
experiments.push({Type: "foo", Expt: 1, Run: 2, Speed: 650});
experiments.push({Type: "foo", Expt: 1, Run: 3, Speed: 675});
experiments.push({Type: "foo", Expt: 2, Run: 1, Speed: 825});
experiments.push({Type: "foo", Expt: 2, Run: 2, Speed: 950});
experiments.push({Type: "foo", Expt:...