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 !

Answer 1

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.