bubbleChart with two ordinal scales in dc.js

Question

I would like to create a bubbleChart using dc.js with two ordinal axis. When I try it, all my bubbles end up at the top of the Y-axis and the Y-axis does not seem top be ordinal.

Is there a way to do that properly ?

Here is my configuration for the bubbleChart :

.dimension(dims.currencyinstrument)
.group(groups.currencyinstrument.pnlSum)
.keyAccessor(function(d) {
        return d.key.split("~")[0]
    })
.valueAccessor(function(d) {
        return d.key.split("~")[1]
    })
.radiusValueAccessor(function(d) {
        return Math.abs(d.value)
    })
.x(d3.scale.ordinal().domain(groups.currencyinstrument.pnlSum.all().map(function(d) {return(d.key.split("~")[0])}).unshift("")))
.y(d3.scale.ordinal().domain(groups.currencyinstrument.pnlSum.all().map(function(d) {return(d.key.split("~")[1])}).unshift("")))
.r(d3.scale.linear().domain([0,groups.currencyinstrument.pnlSum.all().map(function(d) {return(Math.abs(d.value))}).sort(function(a,b){return(b-a)})[0]]))

EDIT : here is the fiddle. The data takes a while (~1min) to load from GitHub but it's all worth it !

@patrickberkeley Posted in the main question. Can be found [here](http://jsfiddle.net/xZFx4/5/). Thanks — Chapo, Mar 07 '14 at 04:27

Gordon · Accepted Answer · 2014-03-21T14:15:57.310

2

The short answer is that coordinateGridMixin doesn't currently support ordinal Y scales.

I was able to get it at least sort of displaying in this fiddle, by removing elasticY and overriding the _prepareYAxis to change the wrong range it specifies:

dc.override(pnlPerCurrencyInstrumentTypebubbleChart, "_prepareYAxis", function(g) {
    this.__prepareYAxis(g);
    this.y().rangeBands([this.yAxisHeight(), 0])
});

http://jsfiddle.net/gordonwoodhull/xZFx4/10/

Hope you can get started with this. I filed this bug to track the problem:

https://github.com/dc-js/dc.js/issues/539

EDIT: looking at it more closely, I guess rangePoints rather than rangeBands would be more appropriate here... guess coordinateGridMixin needs to have a customization point so that bar and scatter plot can specify different behavior.

edited Mar 21 '14 at 14:15

answered Mar 13 '14 at 05:28

Gordon

19,811
4
36
74

Thanks for checking. I tried replicating your "working" fiddle in my application to see if I could play around with it and possibly contribute to the git but it doesn't like the double underscore in `this.__prepareYAxis(g);`. Anything obvious I'm missing here ? – Chapo Mar 14 '14 at 00:50
You mean it can't find the member? Or what's the error? If you're willing to hack on the dc code, the objective is to make coordinateGrid's prepareYAxis look more like prepareXAxis. It might be a little work though. – Gordon Mar 14 '14 at 01:40
Yes it cannot find the `_ _prepareYAxis` function. Is that expected ? At the moment I was just trying to slightly modify your code to override locally only for that graph but if that works well, I might look into integrating it yes. – Chapo Mar 14 '14 at 03:32
OK scratch that it was because I didn't comment out `.elasticY(true)`. Still unsure of what happened though. – Chapo Mar 14 '14 at 03:37

bubbleChart with two ordinal scales in dc.js

1 Answers1