How can I use D3 tree data in the VEGA Api?

user_1083572 0
Viewed 67

I am trying to render D3 tree data using the Vega API.

The Vega Tree documentation states that Vega uses the d3 tree hierarchy. That suggests it should be possible. The Vega page even includes a link to the D3 hierarchy, which looks like this:

{
"name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

But using this directly in a Vega Tree diagram does not work.

Vega's own tree example includes a data file that does work, but the data format looks completely different. Is there a way to transform the D3 data hierarchy to the format that Vega supports? The Vega docs talk about transforms but I can't find an example.

The required Vega format looks like this. It uses ID's to know who the parent node is, instead of nested arrays.

[
{
    "id": 1,
    "name": "flare"
},
{
    "id": 2,
    "name": "analytics",
    "parent": 1
},
{
    "id": 3,
    "name": "cluster",
    "parent": 2
},
{
    "id": 4,
    "name": "AgglomerativeCluster",
    "parent": 3,
    "size": 3938
},
{
    "id": 5,
    "name": "CommunityStructure",
    "parent": 3,
    "size": 3812
}

How can I use D3 formatted tree data in Vega?

vega d3.js javascript
1 Answers

I didn't try it with Vega, but you can convert a hierarchy with a little helper function as follows:

data = {
"name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
};

console.log(flatten(data));

function flatten(hierarchy) {
  let ar = [];
  let i = 0;
  
  let hierarchyWithID = d3.hierarchy(hierarchy).each(d => d.id = i++);
  
  ar = hierarchyWithID.descendants().map(d => {
    let obj = {};
    obj.name = d.data.name;
    obj.id = d.id;
    if (d.parent) { obj.parent = d.parent.id;}
    if (d.size) { obj.size = d.size;}
    return obj;
  });
  
  return ar;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

or alternatively, a version without functions from d3.js (assigning different id's):

data = {
"name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
};

console.log(flatten2(data));

function flatten2(obj) {
  let id = 0;
  return _flatten2(obj);

  function _flatten2(obj, ar = [], parentID = -1) {
    let node = {};
      node.id = id++;
      node.name = obj.name;
      if (parentID !== -1) { node.parent = parentID;}
      if (obj.size) { node.size = obj.size;}
      ar.push(node);

      if (obj.children) {
        for (let child of obj.children) {
          _flatten2(child, ar, node.id);
        }
      }
    return ar;
  }
}

user_39021280
Related