0

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.

Improve this question
2
  • I tried a lot searches but cant get a right way in this. Commented Oct 4, 2014 at 10:23
  • Is there any help from someone? Commented Oct 10, 2014 at 6:50

1 Answer 1

Reset to default
1

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(); });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your help. I am trying with outside JSON. How can I use json file to load in this? can we use d3.json for this? I need to show the names of the values in td. For this I used some modifications in the above code but I couldn't get the datas. please check my question. I updated it. Also can I show only two table heads? I want to show only Florida and New-York only and not Tennessee.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.