Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add treemap [WIP] #1034

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add treemap [WIP] #1034

wants to merge 4 commits into from

Conversation

mtraynham
Copy link
Contributor

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
  • Ensure it works with Crossfilter
  • Ensure filtering works
  • Provide examples

@GunjanSh
Copy link

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

@mtraynham
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

Can you share a JSFiddle?

@GunjanSh
Copy link

@mtraynham
Copy link
Contributor Author

@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
Copy link

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
Copy link

tompiler commented Feb 6, 2016

@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
Copy link

likeleto commented Jun 3, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants