dc.js bubble chart doesn't display bubbles. Grouping returns empty array

Question

Basically, no bubbles are displayed because the group which I use for the chart is empty.

what my data structure looks like :

[{
  "site": "Site",
  "service": "Long Term Care",
  "value": 67.52,
  "quarter": "Q1",
  "date": "2015-02-13T22:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 67.19,
  "quarter": "Q2",
  "date": "2015-05-15T21:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 66.87,
  "quarter": "Q3",
  "date": "2015-08-14T21:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 66.57,
  "quarter": "Q4",
  "date": "2015-11-14T22:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 75.36,
  "quarter": "Q1",
  "date": "2015-02-13T22:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 75,
  "quarter": "Q2",
  "date": "2015-05-15T21:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 74.65,
  "quarter": "Q3",
  "date": "2015-08-14T21:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 74.31,
  "quarter": "Q4",
  "date": "2015-11-14T22:00:00.000Z",
  "groupId": 2
 }]

I want to display a bubble for each row in my data source. I created a dimension based on the quarters (I've also tried using the date field but with the same result) and a group based on the value field (each value is a unique float number). But when printing the resulting group in the console, it returns an empty array. Now I'm not sure if it is even possible to do what I have in mind.

Rest of the code:

ndx = crossfilter(myData);
dateDimension = ndx.dimension(dc.pluck('quarter'));
print_filter(dateDimension);
valueGroup = dateDimension.group(dc.pluck('value'));
print_filter(valueGroup);
minValue = dateDimension.bottom(1)[0].value;
maxValue = dateDimension.top(1)[0].value;
testChart = dc.bubbleChart("#test-chart");
testChart.width(850).height(350).dimension(dateDimension).group(valueGroup)
  .renderLabel(false)
  .maxBubbleRelativeSize(0.3)
  .radiusValueAccessor(function (p) {
        return p.value.value;
      })
  .x(d3.scale.ordinal().domain(["Q1", "Q2", "Q3", "Q4"]))
  .xUnits(dc.units.ordinal)
  .y(d3.scale.linear().domain([0, maxValue + 10])).yAxisLabel("", 20);
dc.renderAll();

Here is the JsFiddle

Here is a picture of what I expected the chart be like.

Ethan Jewett Ethan Jewett · Accepted Answer · 2015-12-22T17:23:47

Lots of issues here, but the main thing is getting your groups properly defined for the visualization you want to do. Here's an update to your JSFiddle that may get you started: https://jsfiddle.net/yewk7c0r/15/

Basic idea for groups is to define your dimension at the level of granularity you need for your visualization and then define your group using reduceSum (or a custom grouping if you want to do average or something like that):

ndx = crossfilter(myData);
dateDimension = ndx.dimension(function(d) {
    return [d.quarter, d.service];
});
valueGroup = dateDimension.group().reduceSum(dc.pluck('value'));

dc.js bubble chart doesn't display bubbles. Grouping returns empty array

1 Answers