CODEWITHSUNDEEP
javascriptd3.js
filup
filup

Reputation: 195

Zoomable Treemap d3.v4

I've extended the zoomable treemap implementation found here , but have hit some issues when trying to update it to work with d3 v4. My hierarchy is read in as a CSV of json objects. Each object is a course with a respective university and department.

var data = d3.nest().key(function(d) { return d.university; }).key(function(d) { return d.department; }).entries(res);

var treemap = d3.treemap()
      .children(function(d, depth) { return depth ? null : d._children; })
      .sort(function(a, b) { return a.value - b.value; })
      .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
      .round(false);

But the v4 treemap object does not have children() or sort() functions. Other sources suggest that sum() and sort() should be performed on the nodes themselves, but I can't reconcile this with the other changes to d3.

Can someone please show me how to put my data in the treemap layout?

Upvotes: 3

Views: 1654

Answers (1)

filup
filup

Reputation: 195

After a few days, I've finally figured it out. The parent-child relationships need to be explicitly defined via d3.stratify.parentId().

Here's a general solution. Let's assume the hierarchical data consists of courses which are nested in departments which are nested in universities which are nested in the root. The data should have the form...

var data = [ {"object_type": "root" , "key":"Curriculum1", "value" : 0.0} , 
{"object_type": "university" , "key": "univ1", "value" : 0.0, 
    curriculum: "Curriculum1" } , 
{"object_type": "department" , "key": "Mathematics", "value": 0.0, "university": "univ1" , 
    curriculum: "Curriculum1"} ,
{"object_type": "course" , "key": "Linear Algebra", "value": 4.0, 
    "department": "Mathematics", "university": "univ1", curriculum: "Curriculum1"} , 
... ]

Note that only the leaves (courses) have values (can be interpreted as credit hours). Intermediate nodes don't have an inherent value in the raw data. To generate the root and pass it to the treemap layout, the code looks like...

  var root = d3.stratify()
    .id( (d) => d.key )
    .parentId( function(d){
      if(d.object_type=='root'){
        return null;
      } else if(d.object_type=='university') {
        return d.curriculum;
      }else if(d.object_type=='department') {
        return d.university;
      } else {
        return d.department;
      }
    })
    (data)
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return a.value - b.value; });

  treemap(root);

Upvotes: 5

Related Questions