This is a wrapper object around D3js, which allows developers to instantiate multiple instances of the visualization and facilitate reusability.
The following JSON is an example of the require format consumable by the Graph object.
{
"nodes":[
{"name":"A","group":1},
{"name":"B","group":1},
{"name":"C","group":1},
{"name":"D","group":1},
{"name":"E","group":1},
{"name":"F","group":1},
{"name":"G","group":1}
],
"links": [
{"source":1,"target":0,"value":1},
{"source":2,"target":1,"value":8},
{"source":3,"target":0,"value":10},
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1},
{"source":5,"target":0,"value":1},
]
}
The following code is the minimum requirement to get started
var graph = Graph();
var data = { "nodes":[ ... ], "links":[ ... ] }
var container = d3.select("#vis").datum(data).call(graph);
The following are manipulable attributes of the Graph object
Changes the width of the container
Changes the height of the container
Changes the color scale for D3
- d3.scale.category10()
- d3.scale.category20()
- d3.scale.category20b()
- d3.scale.category20c()
Identifier of the container div where SVG will be appended
How close the nodes will be to each other
Changes length of links
Shape of the node
- rect
- circle
Size of the node
CSS class of the links
CSS class of the nodes