Bubbles are not showing in Bubble chart using dc.jc

Question

I am making a bubble chart using dc.js , crossfilter.js but bubbles are not showing in the chart !!!! It is just showing x axis and y axis but the bubbles are disappeared.

I was trying make this bubble chart in click to see

here is my code :

var dateDim = ndx.dimension(function(d) {return d.Date;});
  var minDate = dateDim.bottom(1)[0].Date;
  var maxDate = dateDim.top(1)[0].Date;
  console.log(minDate);
  console.log(maxDate);
  //var ageDim = ndx.dimension(function(d){return +d.Age;});
  var daySum = dateDim.group().reduceSum(function(d){return 1;});


  //print_filter("ageSum");
 // var hits = dateDim.group().reduceSum(function(d) {return d.Age;});
  var brush = d3.svg.brush();



  suicideBubbleChart
    .width(990).height(200)
    .transitionDuration(1500)
    .dimension(dateDim)
    .group(daySum)
     .colors(d3.scale.category10())

.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.time.scale().domain([minDate,maxDate]))
.r(d3.scale.linear().domain([0, 4000]))
.minRadiusWithLabel(15)
.yAxisLabel("Suicides")
.elasticY(true)
                .yAxisPadding(100)
                .elasticX(true)
                .xAxisPadding(200)
                .maxBubbleRelativeSize(0.07)
                .renderHorizontalGridLines(true)
                .renderVerticalGridLines(true)
                .renderLabel(true)
                .renderTitle(true);

Thank you.

Answer 1

I fixed enough to start getting stuff showing up on the chart.

There was a space before Date that caused that field name to come out wrong, and the date format was wrong, and I added a radiusValueAccessor.

var dateFormat = d3.time.format('%m/%d/%Y');

...

  .r(d3.scale.linear().domain([0, 10]))
  .radiusValueAccessor(function(d) {
      return d.value;
  })

http://jsfiddle.net/gordonwoodhull/wjeonreq/15/

Obviously it is still not the chart you want, but hopefully now that you have some stuff showing up on the screen, you can start to shape and debug it.

In particular, you will need a valueAccessor in order to place the bubbles in Y, and a Y scale.

It is one of the frustrating things about dc & d3 that if something doesn't work, then you just get an empty chart. The way I tracked this down, after dealing with the errors above, which showed up in the console, was

1. look at daySum.all() to make sure the data was okay (it was, after the date correction)
2. Inspect the svg element in the Elements tab of the Developer tools. The g.chart-body inside there has the actual content. I saw that the bubbles were there but had radius zero. Then I looked back at the stock example to see what radius setup must be missing.