Add treemap [WIP]

[mtraynham]

This is a bit different from the other charts since it represents a hierarchy. Most of the motivation was driven from one of Bostock's examples. I haven't actually tried this with Crossfilter yet, so I'm not sure how it will work with the filtering... I imagine a new filter type may have to be introduced...

Anyways, the keyAccessor is not a single functor, but an array of functors providing the necessary keys on each datum at every level. The valueAccessor and colorAccessor pull the metric values from each datum as normal, but respectively, there is a sizeAggregator and colorAggregator function to accumulate these leave values to each parent node.

I'll provide a picture tomorrow, but it looks almost very similar to Bostock's version (I just productized it for the most part).

Resolves #129

TODO

• [ ] Add tests
• [x] Ensure it works with Crossfilter
• [ ] Ensure filtering works
• [x] Provide examples

[GunjanSh]

Is it possible for you to share a sample json that can be used to create this nested treemap. Or an example please.

[mtraynham]

I don't think it particularly matters what the JSON looks like, but you'll need to figure out a way to get it into Crossfilter (which handles flat rows).

I typically pass CSV from the server, so here's an example of what hierarchical data may look like:

sex,age,location,count
M,20,US,2
F,20,US,3
M,21,US,2
F,21,US,4
M,22,CA,5
F,22,CA,6

This data is a flattened hierarchy as each row is made of multiple key columns (namely sex, age, & location. To get something like to this to work with Crossfilter, you would want to use a dimension that was constructed from an array or object literal, like so:

var ndx = crossfilter(data),
    dimension = ndx.dimension(function (d) { return {sex: d.sex, age: d.age} }),
    group = dimension.group().reduceSum(function (d) { return d.count });

It is likely more performant to return an object literal from the dimension accessor as was tested here.

When constructing the chart, it will need to know how to parse these keys. The keyAccessor on the chart is then an array of keyAccessors that you will use for each level.

var chart = dc.treeMap('#chart1')
    .dimension(dimension)
    .group(group)
    .keyAccessor([
          function (d) { return d.key.sex; },
          function (d) { return d.key.age; }
    ]);

A disclaimer, I haven't tried any of the above as I don't use Crossfilter. In theory, this should work though.

[GunjanSh]

What i have currently is a TopiClusterId(number) and a list of words in that Cluster with frequency for each of them. So for example, TopicCLusterId = 1 has words and frequency such as test=2, test1= 3, test2=5 In a typical treemap scenario, TopicClusterId is the color of the node. and size of each word denotes the size of the child node in cluster with the topic word displayed as the title for each node.

Not sure how i would be able to create a json for this. I have tried treemap like the example in http://mbostock.github.io/d3/talk/20111018/treemap.html . But this doesn not have crossfilter.

[mtraynham]

Something like:

var data = [
    {
        "TopicCLusterId": 1,
        "word": "test",
        "frequency": 2
    },
    {
        "TopicCLusterId": 1,
        "word": "test1",
        "frequency": 3
    },
    {
        "TopicCLusterId": 1,
        "word": "test2",
        "frequency": 3
    },
    {
        "TopicCLusterId": 2,
        "word": "test",
        "frequency": 1
    },
    {
        "TopicCLusterId": 2,
        "word": "test1",
        "frequency": 1
    },
    {
        "TopicCLusterId": 2,
        "word": "test2",
        "frequency": 5
    }
]

Then with Crossfilter and dc:

var ndx = crossfilter(data),
    dimension = ndx.dimension(function (d) { return {clusterId: d.TopicCLusterId, word: d.word} }),
    group = dimension.group().reduceSum(function (d) { return d.frequency; });
var chart = dc.treeMap('#chart1')
    .dimension(dimension)
    .group(group)
    .keyAccessor([
          function (d) { return d.key.clusterId; },
          function (d) { return d.key.word; }
    ]);

[GunjanSh]

But this would not allow me group all the words with the same cluster(esp Color). Please refer this ... http://mbostock.github.io/d3/talk/20111018/treemap.html

[mtraynham]

It would if each record in the JSON dataset had the same value (string coerced) for a particular key (such as "TopicCLusterId"). The code transforms the flat structure into a hierarchy using d3.nest and accumulates a color/size score based on some measurable features of the data (such as frequency).

You could easily convert something like:

[
    {
        "TopicCLusterId": 1,
        "words": {
            "test": 1,
            "test2": 2
        }
    },
    {
        "TopicCLusterId": 2,
        "words": {
            "test": 3,
            "test2": 4
        }
    }
]

into a flat list structure if this is what you have. Something like

var data = data.reduce(function (acc, topic) {
    for (var word in topic.words) {
        acc.append({clusterId: topic.TopicCLusterId, word: word, frequency: topic.words[word]});
    }
    return acc;
}, []);

[GunjanSh]

I have tried using the sample you provided. I still get Data[Object][Object]. could you please let me know, where i would be going wrong.

[mtraynham]

Can you share a JSFiddle?

[GunjanSh]

https://jsfiddle.net/#&togetherjs=34nul0rEQe

[mtraynham]

@GunjanSh I've updated the code with a bug fix to handle Crossfilter a bit better. I've also added an example HTML page you can use to try it out.

[GunjanSh]

Thanks for sharing the files. We have a dashboard with couple of charts - geo based, pie chart, area chart, stack chart, bar chart etc. We do some analysis on tweets and analyzed data is visualized as charts. One of the charts is to show Treemap which would highlight all the topics9most talked about topics) in each cluster along with the frequency of each word. Currently we are using D3 Js Treemap. whch does not allow cross filter. All the charts except Treemap has cross filter option and works perfectly fine.

In order to allow Treemap for cross filter,i was trying to use the code you provided(supported by DC). The sample you provided works fine for sample TopicModel data. But i am facing difficulty when the master data has other information like date, id, tweet, country etc and along with that has a property which saves all the TopicModel data. Dimension and grouping are not working fine in this case. I would appreciate, if i get any information on this.

Thank you!

[tompiler]

@mtraynham excellent work. Wrote out a whole question for you regarding how to get this to work with no hierarchy - i.e. with one keyAccessor instead of two as in the example, but managed to answer it myself. Thank you!

[likeleto]

Trying to find the solution how to use dimension with array value for treemap. Appreciate any help https://stackoverflow.com/questions/44338307/using-dimensions-with-arrays-in-dc-js-for-treemap