DC.js Bubble chart- using text for x and y axis - dc.js

Question

I'm pretty new into this. I'm trying to understand how to develop a bubble chart using the DC.js library. The reason I'm using DC.js library because all my other row charts are crossfiltering. If I select any bars in the row charts, I want it to crossfilter the bubble chart also.
Currently I'm trying to develop the bubble chart and its not working. It is not displaying properly. I noticed that most of the dc bubble charts are using measurements for x and y axis. For my case, I need to use text instead of integers or date, etc. Here is a sample data:
var data = [
{Failure: "test1", topic: "a", count: "2"},
{Failure: "test1", topic: "b", count: "2"},
{Failure: "test1", topic: "c", count: "95"},
{Failure: "test1", topic: "c", count: "2"},
{Failure: "test2", topic: "a", count: "75"},
{Failure: "test2", topic: "b", count: "2"},
{Failure: "test2", topic: "c", count: "10"},
{Failure: "test2", topic: "a", count: "2"},
{Failure: "test3", topic: "a", count: "51"},
{Failure: "test3", topic: "b", count: "40"},
{Failure: "test3", topic: "c", count: "20"},
{Failure: "test3", topic: "b", count: "15"}
];
When I create a bubble chart, I want the Failure column be the X axis which will display "Test1, Test2, Test3" and the y axis, display "a, b, c". The count column will be the size of the bubble. So i can view a bubble that is how many count would be for test3 and topic C.
Is this possible in dc.bubblechart? because all I see in the examples when x and y axis are ranges in numbers or date.
Here is my code so far to develop this bubble chart. It's the best I can do...
var failure= ndx.dimension(function(d) {return d.failure;});
var topic= ndx.dimension(function(d) {return d.topic;});
var bubbleChart = dc.bubbleChart("#bubble-chart");
//debugger;
bubbleChart
.dimension(failure)
.group(dateGroup)
.x(d3.scale.ordinal().domain(failure))
.y(d3.scale.ordinal().domain(topic))
.width(400)
.height(400)
.yAxisPadding(50)
.xAxisPadding(50)
.xAxisLabel('X') // (optional) render an axis label below the x axis
.yAxisLabel('Y') // (optional) render a vertical axis lable left of the y axis
.renderLabel(true)
.title(function (p) {
return [
"Failure: " + p.value.Failure,
"Topic: " + p.value.topic,
"count: " + p.value.count,
]
.join("\n");
})
.renderTitle(true)
.renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
.renderVerticalGridLines(true)
.maxBubbleRelativeSize(0.3)
.keyAccessor(function (p) {
return p.value.Failure;
})
.valueAccessor(function (p) {
return p.value.topic;
})
.radiusValueAccessor(function (p) {
return p.value.count;
})
.elasticRadius(true)
.elasticY(true)
.elasticX(true);

Answer 1

I switched over to heatmap and it works what i expected to be! And the client likes it =) Thanks for the advised #Gordon
I used a heatmap that is provided in DC.js. The crossfiltering works in both ways.