dc.js – how to create a row chart from multiple columns

by

Interesting problem! It sounds somewhat similar to a pivot, requested for crossfilter here. A solution comes to mind using “fake groups” and “fake dimensions”, however there are a couple of caveats:

  • it will reflect filters on other dimensions
  • but, you will not be able to click on the rows in the chart in order to filter anything else (because what records would it select?)

The fake group constructor looks like this:

function regroup(dim, cols) {
    var _groupAll = dim.groupAll().reduce(
        function(p, v) { // add
            cols.forEach(function(c) {
                p[c] += v[c];
            });
            return p;
        },
        function(p, v) { // remove
            cols.forEach(function(c) {
                p[c] -= v[c];
            });
            return p;
        },
        function() { // init
            var p = {};
            cols.forEach(function(c) {
                p[c] = 0;
            });
            return p;
        });
    return {
        all: function() {
            // or _.pairs, anything to turn the object into an array
            return d3.map(_groupAll.value()).entries();
        }
    };
}

What it is doing is reducing all the requested rows to an object, and then turning the object into the array format dc.js expects group.all to return.

You can pass any arbitrary dimension to this constructor – it doesn’t matter what it’s indexed on because you can’t filter on these rows… but you probably want it to have its own dimension so it’s affected by all other dimension filters. Also give this constructor an array of columns you want turned into groups, and use the result as your “group”.

E.g.

var dim = ndx.dimension(function(r) { return r.a; });
var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);

Full example here: https://jsfiddle.net/gordonwoodhull/j4nLt5xf/5/

(Notice how clicking on the rows in the chart results in badness, because, what is it supposed to filter?)

More Related Contents:

  1. Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
  2. Initial Range selection in DC.js chart
  3. Show values on top of bars in a barChart
  4. Scaling d3 v4 map to fit SVG (or at all)
  5. Replacing d3.transform in D3 v4
  6. Adding an image within a circle object in d3 javascript?
  7. How to invoke “click” event programmatically in d3?
  8. d3 add text to circle
  9. Packing different sized circles into rectangle – d3.js
  10. D3.js Map with Albers Projection: How to rotate it?
  11. D3 Force Directed Graph: why don’t the flags appear?
  12. Generate (multilevel) flare.json data format from flat json
  13. Creating a table linked to a csv file
  14. D3 Bar Graph example not working locally
  15. Add text label to d3 node in Force layout
  16. D3 – how to deal with JSON data structures?
  17. nvd3 piechart.js – How to edit the tooltip?
  18. Is there a way to zoom into a D3 force layout graph?
  19. Align Marker on node edges D3 Force Layout
  20. Add names of the states to a map in d3.js
  21. How to translate ‘this’ in D3 JavaScript to TypeScript?
  22. Add text label to d3 node in Force directed Graph and resize on hover
  23. D3 Non-Continuous Dates Domain Gives Gaps on X-Axis
  24. Appending multiple non-nested elements for each data member with D3.js
  25. Calculate SVG Path Centroid with D3.js
  26. Change and transition dataset in chord diagram with D3
  27. Using d3 to shade area between two lines
  28. D3: How do I set “click” event and “dbclick” event at the same time?
  29. D3 Tree Layout Separation Between Nodes using NodeSize
  30. How to get the total depth of an unknown JSON hierarchy?

Leave a Comment