Does crossfilter supported nested dimensions?

Question

I am putting together an interactive visualization of some public health data in dc.js. I want users to be able to filter by a set of variables (e.g. type of medical facility, region) using pie charts. Below these filters, in rowcharts, I want to display ten facilities with the largest number of patients.

The issue I am running into is that the rowcharts only display the top ten results from the whole dataset. Ideally, I would filter based on facility type/region and then see the top ten bars from that subsection of the data. Right now, I only see the one or two bars from the overall top ten.

My question is whether DC.js and crossfilter support nested dimensions where I could filter on the first dimension (by facility type/region) and display data from the second dimension. That may also be the wrong approach for other reasons.

I can try to put together a jsfiddle to demonstrate my current situation. However, information about whether nested dimensions exist (or apply to this situation) would also be helpful.

What you are describing should work. The fact that it is not showing you the top results from your selection is either because your groups are defined incorrectly (groups do not observe filters on their own dimensions) or because of the way you are using dc.js's cap options. If you can share a JSFiddle, we should be able to help you. — Ethan Jewett
If I understand your question correctly, I wouldn't describe these as "nested" dimensions - they are just independent dimensions, and that's what crossfilter excels at. The expected behavior is that before you filter, the second chart will show the top ten results overall; once you filter using the first chart, the second chart's bars should resize and it should show the top ten of the filtered results. — Gordon

Dilan Dilan · Accepted Answer · 2017-04-19T04:44:24

You can definitely stack the dimensions. First, create dimension A and filter by it. Then you can grate other dimensions and stack them.

Below is a quick example from working code that creates and filters by the "price" dimensions and then has "restaurantNames" dimensions and then a "stars" dimensions.

The link to the working code is here.

  var xf;

  function drawMarkerSelect(data) {
      xf = crossfilter(data);
      var groupname = "marker-select";

      var priceDimension = xf.dimension(function(d) {
                return d.price_range;
      }).filter(function (d) {
            //...
        });

      var restaurantNames  = xf.dimension(function(d) {
                return d.name;
      });
      var restaurantsGroup = restaurantNames.group().reduce(
            //  .... 
      );

      marker = dc_leaflet.markerChart("#container .map", groupname) 
         // ........
       ;
        var stars = xf.dimension(function(d) {
                return d.stars;
        });
        var starsGroup = stars.group().reduceCount();
        var pie = dc.pieChart("#container .pie",groupname)
                  .dimension(stars)
                  .group(starsGroup)
                  // ... 
                  });
      dc.renderAll(groupname);
  }

Does crossfilter supported nested dimensions?

1 Answers