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/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...