title: DC.js Bubble chart- using text for x and y axis
body: <p>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. </p>
  
  <p>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:</p>
  
  <pre><code>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"}
      ];
  </code></pre>
  
  <p>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. </p>
  
  <p>Is this possible in dc.bubblechart? because all I see in the examples when x and y axis are ranges in numbers or date. </p>
  
  <p>Here is my code so far to develop this bubble chart. It's the best I can do...</p>
  
  <pre><code>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);
  </code></pre>