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.

It will be easier for us to help you troubleshoot if you can provide a jsFiddle or the like. In the meantime, there are some hints for how to start debugging in the FAQ: https://github.com/dc-js/dc.js/wiki/FAQ — Gordon, Mar 20 '15 at 19:58
One problem here is that you probably do not mean to use a time scale for Y. Since it's a count of days, a linear scale would be more appropriate. — Gordon, Mar 20 '15 at 20:02
@Gordon http://jsfiddle.net/MituVinci/sp27gbL0/ . the code is too long but i just need to fix suicideBubbleChart . I am trying to fix it. — Mitu Vinci, Mar 20 '15 at 20:29
I started fixing the fiddle here: http://jsfiddle.net/gordonwoodhull/wjeonreq/1/. However, it's not possible to load external data files in jsFiddle, so you'll have to embed the data in your fiddle. Here is one way to do that: https://stackoverflow.com/questions/22890836/loading-external-csv-file-in-jsfiddle — Gordon, Mar 20 '15 at 21:07
Thank you . I added the csv data in block
in the javascript file.Hope you can use it . — Mitu Vinci, Mar 20 '15 at 21:23
You'll have to share the link again, since jsFiddle creates a new link for each change, and doesn't seem to have a way to look for forks or future versions of a notebook. — Gordon, Mar 20 '15 at 21:28
I am so sorry. http://jsfiddle.net/MituVinci/sp27gbL0/1/ here it is. — Mitu Vinci, Mar 20 '15 at 21:30

Gordon · Accepted Answer · 2015-03-20T22:24:36.697

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.

enter image description here

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

look at daySum.all() to make sure the data was okay (it was, after the date correction)
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.

Bubbles are not showing in Bubble chart using dc.jc

1 Answers1