NickQiZhu
commented
12 years ago Hi Doug,
I am glad you found dc.js useful. I have created this library mainly based on my own project requirement so some of the chart might not offer exactly what you expect. Currently bubble chart actually only works on one dimension with a multi-value group/reduce. It allows you to retrieve 3 different values for x/y/radius respectively. It does not allow you bind your data to the coloring of the bubble yet (which is an interesting idea). You can take a look at the source code of my Nasdaq example page to see how a multi-value group/reduce in crossfilter can be used to render a bubble chart.
Create crossfilter dimension and a multi-value group/reduce:
var yearlyDimension = ndx.dimension(function(d) {
return d3.time.year(d.dd);
});
var yearlyPerformanceGroup = yearlyDimension.group().reduce(
//add
function(p, v) {
++p.count;
p.absGain += +v.close - +v.open;
p.fluctuation += Math.abs(+v.close - +v.open);
p.sumIndex += (+v.open + +v.close) / 2;
p.avgIndex = p.sumIndex / p.count;
p.percentageGain = (p.absGain / p.avgIndex) * 100;
p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
return p;
},
//remove
function(p, v) {
--p.count;
p.absGain -= +v.close - +v.open;
p.fluctuation -= Math.abs(+v.close - +v.open);
p.sumIndex -= (+v.open + +v.close) / 2;
p.avgIndex = p.sumIndex / p.count;
p.percentageGain = (p.absGain / p.avgIndex) * 100;
p.fluctuationPercentage = (p.fluctuation / p.avgIndex) * 100;
return p;
},
//init
function() {
return {count:0, absGain:0, fluctuation:0, fluctuationPercentage:0, sumIndex:0, avgIndex:0, percentageGain:0};
}
);Char definition:
yearlyBubbleChart.width(990)
.height(250)
.dimension(yearlyDimension)
.group(yearlyPerformanceGroup)
.colors(d3.scale.category20c())
.keyRetriever(function(p) {
return p.value.absGain;
})
.valueRetriever(function(p) {
return p.value.percentageGain;
})
.radiusValueRetriever(function(p) {
return p.value.fluctuationPercentage;
})
.x(d3.scale.linear().domain([-2500, 2500]))
.y(d3.scale.linear().domain([-100, 100]))
.r(d3.scale.linear().domain([0, 4000]))
.renderLabel(true)
.renderTitle(true)
.label(function(p) {
return p.key.getFullYear();
})
.title(function(p) {
return p.key.getFullYear()
+ "\n"
+ "Index Gain: " + numberFormat(p.value.absGain) + "\n"
+ "Index Gain in Percentage: " + numberFormat(p.value.percentageGain) + "%\n"
+ "Fluctuation / Index Ratio: " + numberFormat(p.value.fluctuationPercentage) + "%";
})
.yAxis().tickFormat(function(v) {
return v + "%";
});Also check out crossfilter's API for more details: https://github.com/square/crossfilter/wiki/API-Reference
A side note, typically a bubble chart allow you to encode 3 different information using x/y/radius; adding a fourth dimension, in my personal opinion, might be a little bit too tricky for your user to decipher. In that case I would have probably just created a separate chart (a bar chart or line chart) to highlight this data distribution (which is what dc.js designed for multi-dimensional representation). I am also currently working on a concept called renderlet - a sort of hook/callback that you can register in any chart to inject your own custom logic to render anything you want using raw d3 api. This capability will be ready in next release (v0.7). Once that is in place you should be able to set the color for each of the bubble based on your own calculation.
Cheers,
Nick
syrincella
Hi Nick,
I'm really enjoying playing with your dc.js package here. I've started right off on a bubbleChart, and I've run into this issue: I can define a color scale, but it's not clear to me how I can bind it to a dimension other than the one that is bound to the entire chart by the .dimension call.
I'm looking at your example, and I can't really glean from that (maybe I should just build it locally and look) by what domain the color range varies across. I can't detect a transition by years, or by percent gain/loss, or by point gain/loss. All colors seem to fill bubbles clustered near [0,0] on the graph.
I have four dimensions I want to display. X & Y obviously, then another that drives the size of the bubbles, and then a fourth that is a kind of heatmap on the bubbles. So I want to define a hot-to-cold color range (doable) and then apply it to a specific dimension somehow. Ways I could think of would either be to add some .colorDimension call or to define a .colorValueRetriever on the bubbleChart function and then stash associated color with a point during the reduceAdd.
I was thinking of exploring this idea in my own fork, but I wanted to run the idea past you as I'm very fresh to your code base (and to d3 (and to crossfilter (and to javascript!))) and could easily be missing something. If you think I am misguided, I'd love a pointer. If you think I'm on to something, then I'd love to hear that too and maybe you'll see a pull request soon.
thanks - Doug