The network chart requires a data object with three attributes: root, nodes and links. The nodes should have an id and the number of connection with other nodes numcn. The id will be used to retrieve additional nodes on click. The number of connections is necessary to determine whether the node has additional connections or not.
The links represent the connections between nodes. They should have the from and to attributes, that should contain the id of the connected nodes. The network chart will discard duplicated links. Links from A to B or from B to A will be considered equal.
The root attribute indicates which is the central node. For instance, a valid data structure will be:
{
"root": "A",
"nodes": [
{"id": "A", "name": "Mr. A", "type": "persona", "numcn": 3},
{"id": "B", "name": "Miss B", "type": "persona", "numcn": 3},
{"id": "C", "name": "C Corp", "type": "institucion", "numcn": 2},
{"id": "D", "name": "Dr. D", "type": "persona", "numcn": 5}
],
"links": [
{"from": "A", "to": "B"},
{"from": "A", "to": "C"},
{"from": "A", "to": "D"},
{"from": "B", "to": "D"},
{"from": "C", "to": "D"}
]
}Optionally, the nodes may have additional attributes that will control other aspects. The has_conflict attribute (boolean) will add the class has-conflict to the nodes, allowing to set visual attributes for this kind of nodes via CSS. Nodes can also have a description, which can be used to add a text box with the attribute information. See below for more details on how to configure the chart to display node descriptions.
The following script initiates a force chart using the data contained in the file A.json. By default, the central node is colored with aqua-light with and surrounded by a grey stroke. The other nodes are light green and change color when the cursor is on them. A grey stroke around a non-central node indicates that the node has neighbors that are not displayed (as they are not linked to the central node). A different style is used weither the link connects to the central node or not. All the nodes can be dragged.
// Container DIV
<div id="example01"></div>
<script>
d3.json('http://poderomedia.github.io/nodemapper/data/A.json', function(error, data) {
// Create a chart with the default options
var chart = pty.chart.network();
d3.select('div#example01')
.data([data])
.call(chart);
});
</script>The width and height of the chart can be set by using the options .width() and .height() . If omitted, the default parameters are width = 400 and height = 400.
// Create a chart with custom width and height
var chart = pty.chart.network()
.width(600)
.height(300);
d3.select('div#example02')
.data([data])
.call(chart);The radius of the nodes can be set using the option .nodeRadius(). The default value is 20.
// Create a chart with custom node radius
var chart = pty.chart.network()
.nodeRadius(25);
d3.select('div#example03')
.data([data])
.call(chart);Set the styles for circles of class persona and institucion.
.network-chart circle.persona {
fill: #C44D58;
}
.network-chart circle.institucion {
fill: #556270;
}
.network-chart circle.candidato {
fill: white;
}Set the function to determine the node class using the attributes of each node element.
// Create a chart and set the class for the nodes
var chart = pty.chart.network()
.nodeClass(function(d) { return d.type; });
d3.select('div#example04')
.data([data])
.call(chart);To add a legend, the user has to provide a list of all the node types as follows and submit the list to .legendItems().
var legend = [
{name: 'Persona', type: 'persona'},
{name: 'Candidato', type: 'candidato'},
{name: 'Institución', type: 'institucion'}
];
var chart01 = pty.chart.network()
.legendItems(legend);The style of the circles representing each node type in the legend has to be set separately form the style for the nodes in the graph. This allows for instance to draw a stroke around the legend circles in order to differentiate them from the background without altering the style of the nodes of the graph.
/* Legend */
.legend {
.persona {
fill: #75507b;
stroke: @grey-light;
stroke-width: 1;
}
.candidato {
fill: #729fcf;
stroke: @grey-light;
stroke-width: 1;
}
.institucion {
fill: #8ae234;
stroke: @grey-light;
stroke-width: 1;
}
text {
font-size: 11px;
fill: @grey-light;
}
}var chart = pty.chart.network()
.nodeLabel(function(d) { return d.name; });
d3.select('div#example05')
.data([data])
.call(chart);It's possible to add a description for each node by setting an accessor for the description attribute. If our nodes have an attribute description, we can set the accessor for the node description as shown in the following code block. The position of the text box can be modified by using the textBox method, and passing the x and y offset and the text box size, in pixels.
var chart = pty.chart.network()
.nodeDescription(function(d) { return d.description; })
.textBox({x: 10, y: 260, width: 340, height: 250);
d3.select('div#example05')
.data([data])
.call(chart);The style of the text box can be controlled by setting the style for the class textbox-background and textbox-body.
/* Description Text Box */
.textbox-background {
fill: #fff;
fill-opacity: 0.5;
}
.textbox-body {
font-size: 11px;
padding: 6px;
opacity: 0;
}The user can change the values of the charge, friction, link distance and link strength using the options .charge(), .friction(), .linkDistance() and linkStrength() respectively. These are standard properties of the force layout and a complete documentation can be found in the D3 force layout documentation. By default, the central node is initially pinned to the center and stays pinned to any location it is dragged to. This can be changed with the option .fixCenter(false).
In the following example, nodes B and D have neighbors that are not displayed initially, because they are not connected to the central node A. If the nodeBaseURL attribute is set, clicking on B will retrieve the nodes from data/B.json and add them to the chart.
// Set the function to generate the URL of each node
var chart = pty.chart.network()
.nodeBaseURL(function(d) { return 'data/' + d.id + '.json'; });
// Bind the container div to the data and invoke the chart
d3.select('div#chart')
.data([data])
.call(chart);In the following example, when the user clicks on a node, a link appears on the bottom left of the chart. The text corresponds to the .nodeLabel() while the link can be set using .nodeURL().
// Set the function to generate the URL of each node
var chart = pty.chart.network()
.nodeLabel(function(d) { return d.name; })
.nodeURL(function(d) { return 'http://poderomedia.github.io/nodemapper/pages/' + d.id; });
// Bind the container div to the data and invoke the chart
d3.select('div#chart')
.data([data])
.call(chart);Create a page containing a single network chart (see here for instance) and insert the embed tag with appropiate values.
<embed type="text/html" src="http://poderomedia.github.io/nodemapper/embed" width="640" height="480">