Group multi dimensional array using crossfilter

Question

I want to make multi level array filtering using crossfilter ans d3.

App.js looks like below.

    var region = [{
            "code" : "New-York",
            "id"   : 1,
            "centre" : [{
                "name": "xxx",
            "id" : 11
                },{
                "name": "yyy",
                "id" : 12,   
                },{
                "name": "zzz",
                "id" : 13,   
                }]
            },{   
            "code" : "Florida",
            "id"   : 2,
            "centre" : [{
                "name": "aaa",
                "id" : 21
                },{
                "name": "bbb",
                "id" : 23,  
                }]
            },{
            "code" : "Tennessee",
            "id"   : 3,
            "centre" : [{
                "name": "ccc",
                "id" : 31
                }, {
                "name": "ddd",
                "id" : 32,  
                }, {
                "name": "eee",
                "id" : 33,  
                }, {
                "name": "fff",
                "id" : 34,  
                }]
            },{
            "code" : "Jersey",
            "id"   : 3,
            "centre" : [{
                "name": "ccc",
                "id" : 31
                }, {
                "name": "ddd",
                "id" : 32,  
                }, {
                "name": "eee",
                "id" : 33,  
                }, {
                "name": "fff",
                "id" : 34,  
                }]
            }
        ];


$(document).ready(function() {

    var i, allCodeDimensionGroups, currentSet, currentSetSum;    
        regionCrossfilter = crossfilter(region);
        regionsCount = regionCrossfilter.groupAll().value();

        codeDimension = regionCrossfilter.dimension(
        function(regiion) {
        //return region.centre[0].id;
        return regiion.code;
        }),

        codeDimensionGroup = codeDimension.group(),
        table = $('#outputTable'),
        header = $('#outputTable > thead > tr'),
        valuesRow = $('#outputTable > tbody > tr');

    function appendRegionData(region, value) {
        //Adds header cell and value beneath it
        header.append('<th>' + region + '</th>');
        valuesRow.append('<td>' + value + '</td>')
    }   

    appendRegionData('Region', regionsCount);

    allCodeDimensionGroups = codeDimensionGroup.all();
    //ee
    for (i = 0; i < allCodeDimensionGroups.length; i += 1) {
        codeDimension.filter(allCodeDimensionGroups[i].key);
        currentSet = codeDimension.top(Infinity);

        appendRegionData(allCodeDimensionGroups[i].key, currentSet);
    }

    //Reset the filters when you are done
    codeDimension.filterAll();
});

Can we show the results as below in a table.

     New-York       Florida        Jersey
       xxx            aaa            ccc
       yyy            bbb            ddd
       zzz                           eee
                                     fff

How can we do this using crossfilter js and d3 js.

Any help would be accepted.

Thanks in advance.

A. C. Voicu A. C. Voicu · Accepted Answer · 2014-10-10T14:52:50

To obtain the specified result you do not require d3.js, just crossfilter.js. For utility, I have also included jQuery in my answer to easily select and append elements. Considering that you have already downloaded the jquery and crossfilter .js files, this is the HTML markup:

<!DOCTYPE html>
<html>
<head>
    <title>Crossfilter Output</title>
</head>
<body>
    <table id='outputTable'>
        <thead><tr></tr></thead>
        <tbody><tr></tr></tbody>
    </table>

    <script src='jquery.js'></script>
    <script src='crossfilter.js'></script>
    <script src='app.js'></script>     
</body>
</html>

and here is the 'app.js' file content that will generate your result:

var region = [{
            code : 'New-York',
            id   : 1,
            centre : [{
                name: 'xxx',
                id : 11
                },{
                name: 'yyy',
                id : 12,   
                },{
                name: 'zzz',
                id : 13,   
                }]
            },{   
            code : 'Florida',
            id   : 2,
            centre : [{
                name: 'aaa',
                id : 21
                },{
                name: 'bbb',
                id : 23,  
                }]
            },{
            code : 'Tennessee',
            id   : 3,
            centre : [{
                name: 'ccc',
                id : 31
                }, {
                name: 'ddd',
                id : 32,  
                }, {
                name: 'eee',
                id : 33,  
                }, {
                name: 'fff',
                id : 34,  
                }]
            }
        ];


$(document).ready(function() {
    var i, allCodeDimensionGroups, currentSet, currentSetSum
        regionCrossfilter = crossfilter(region);
        regionsCount = regionCrossfilter.groupAll().value();
        codeDimension = regionCrossfilter.dimension(
        function(region) {
            return region.code;
        }),
        codeDimensionGroup = codeDimension.group(),
        table = $('#outputTable'),
        header = $('#outputTable > thead > tr'),
        valuesRow = $('#outputTable > tbody > tr');
    function appendRegionData(region, value) {
        //Adds header cell and value beneath it
        header.append('<th>' + region + '</th>');
        valuesRow.append('<td>' + value + '</td>')
    }   

    appendRegionData('Region', regionsCount);
    allCodeDimensionGroups = codeDimensionGroup.all();
    for (i = 0; i < allCodeDimensionGroups.length; i += 1) {
        codeDimension.filter(allCodeDimensionGroups[i].key);
        currentSet = codeDimension.top(Infinity);
        currentSetSum = 0;
        for(j = 0; j < currentSet.length; j += 1) {
            currentSetSum += currentSet[j].centre.length;
        }
        appendRegionData(allCodeDimensionGroups[i].key, currentSetSum);
    }
    //Reset the filters when you are done
    codeDimension.filterAll();
});

Group multi dimensional array using crossfilter

1 Answers