DC.js - Scatter Plot Not Updating
HTML
<script src="http://nickqizhu.github.io/dc.js/js/d3.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">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="rowChart" />
<div id="bubbleChart" />
JavaScript
var chartExample = {
initChart: function(experiments) {
var rowChart = dc.rowChart("#rowChart");
var bubbleChart = dc.bubbleChart("#bubbleChart");
experiments.forEach(function(x) {
x.Speed = +x.Speed;
});
var ndx = crossfilter(experiments),
typeDimension = ndx.dimension(function(d) {
return d.Type;
}),
typeGroup = typeDimension.group().reduce(
function(p, v) {
++p.count;
p.sumSpeed += v.Speed;
p.avgSpeed = p.sumSpeed / p.count;
return p;
},
function(p, v) {
--p.count;
p.sumSpeed -= v.Speed;
p.avgSpeed = p.count ? p.sumSpeed / p.count : 0;
return p;
},
function() {
return {
count: 0,
sumSpeed: 0,
avgSpeed: 0
};
}),
runDimension = ndx.dimension(function(d) {
return +d.Run;
}),
speedSumGroup = runDimension.group().reduceSum(function(d) {
return d.Speed;
});
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);
bubbleChart.width(500)
.height(200)
.dimension(typeDimension)
.group(typeGroup)
.x(d3.scale.linear().domain([0, 20]))
.y(d3.scale.linear().domain([0, 1000]))
.keyAccessor(function(d) {
return d.value.count;
})
.valueAccessor(function(d) {
return d.value.avgSpeed;
})
.radiusValueAccessor(function(d) {
return 1;
});
bubbleChart.MIN_RADIUS = 1;
dc.renderAll();
},
initData: function() {
var experiments = [];
experiments.push({
Type: "foo",
Expt: 1,
Run: 1,
Speed: 700
});
experiments.push({
Type: "foo",
...