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

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);

Generally, ordinal Y scales are not supported for most charts in dc.js (only X). Here's the relevant issue: github.com/dc-js/dc.js/issues/539. You might consider using a heatmap instead, since that is basically a bubble chart with ordinal scales and using color instead of bubble size. Although you won't be able to change the radius based on data, you do have the option to display them as circles instead of rectangles by changing xBorderRadius and yBorderRadius. — Gordon

timJIN520 timJIN520 · Accepted Answer · 2017-12-18T14:44:41

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.

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

1 Answers