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?

Answers:

Answer

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);

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.