CODEWITHSUNDEEP
javascriptd3.jsd3plus
ackuser
ackuser

Reputation: 5879

Zoomable Treemap with more than two levels, D3plus?

I would need to create a zoom able treemap using D3plus with more than two levels of zoom.
It should be something like http://d3plus.org/examples/advanced/9860411/

Basically, I am using D3plus instead of D3 because I want to use its scaffolding to create treemap in a easier way.

Anyway, in D3 it is already done http://bost.ocks.org/mike/treemap/

Can anyone help me on this? Thanks in advance

Upvotes: 0

Views: 1628

Answers (1)

afenix
afenix

Reputation: 21

This is very easy in D3plus and you can have as many zoom levels as desired by including additional level(node) information in the data array.

It's dependent on two things:

Data is a flat json structure and includes the relationship of the nodes to each other (parent, child, etc): 

var sample_data = [
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 1"},
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 2"},
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 3"},
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 1"},
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 2"},
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 1"},
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 2"},
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 1"},
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 2"},
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 1"},
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 2"},
    {"value": 1, "name": "zeta", "group": "group 1", "details": "example 1"}
  ]

Notice that the each name identifies which group it belongs to. In this case the group is the parent node, and the name is the child.

Use the .id() method to instruct the d3plus on how many levels to include and their order. Using the data structure above and including the third zoom level of "details" would be: .id(["group","name", "details"]) d3plus id() documentation and example here

Check out this fiddle

Upvotes: 1

Related Questions