D3JS

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

There are two kinds of graph templates in d3js that have been tried out for the story VSPC-99.

Force Directed Graph.

I found this youtube tutorial helpful to understand how to make a bare-bones force directed graph Tutorial Link. Each node on the graph is a Json, and the nodes are represented as an array or list of json objects. This is this API list for the force directed graph. Main API’s we need are: forceSimulation, force and the listener ‘on’.

One of the ‘force’ api’s called ‘link’ allows the binding of links between the list of nodes specified in forceSimulation. We need to specify the id that is used to identify the source and target of the nodes and have our links specified with the source and target having the same value as the identity in the nodes.

Snippet of code

var simulation = d3.forceSimulation(graph.nodes)
.force("link", d3.forceLink(graph.links).id(function(d){
return d.id;
}))
.force("charge", d3.forceManyBody().strength(-400))
.force("center", d3.forceCenter("200", "200"))
.on("tick", ticked);

Sample JSON of nodes

nodes: Array(77) [
0: Object {id: "Myriel", group: 1}
1: Object {id: "Napoleon", group: 1}
2: Object {id: "Mlle.Baptistine", group: 1}
3: Object {id: "Mme.Magloire", group: 1}

]

Sample JSON of links

links: Array(254) [
0: Object {source: "Napoleon", target: "Myriel", value: 1}
1: Object {source: "Mlle.Baptistine", target: "Myriel", value: 8}
2: Object {source: "Mme.Magloire", target: "Myriel", value: 10}
3: Object {source: "Mme.Magloire", target: "Mlle.Baptistine", value: 6}
4: Object {source: "CountessdeLo", target: "Myriel", value: 1}

]

2. Tree Graph

This is useful to display tree structure of a json. The Json structure must be of the type:

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];

children contains the next level of each node. It is an array, and each json represents one child in the array.

A good article I found for this is found Here.

The D3js library can be loaded like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

We initialize the tree like this:

d3.layout.tree()
	.size([height, width]);

Next, the tree layout can be created like this:

This needs to be a part of the recursive function, which we can call update;

This blueprint helps to create the tree graph.

References

DigInG Knowledge Base

D3JS

Analytics

Related content