Graphics Reference
In-Depth Information
interactive visualizations.
d3.js
is a popular visualization library that does
use some graphs, and, as shown in the following example, a graph can be
represented in JSON:
{
"nodes":[
{ "name":"Ann","numEmail":1,"totalKb":2048 },
{ "name":"Ben","numEmail":4,"totalKb":7687 },
{ "name":"Tim","numEmail":2,"totalKb":102 },
{ "name":"Zoe","numEmail":3,"totalKb":4292 }
],
"links":[
{ "source":0,"target":1,"value":1 },
{ "source":1,"target":2,"value":2 },
{ "source":1,"target":3,"value":3 },
{ "source":2,"target":3,"value":2 }
]
}
Essentially,thisisalistofnodes,denotedas
"nodes":[]
andalistoflinks,
shown as
"link":[]
. Each individual node object is shown in braces (
{}
)
as a set of
attribute:values
. Note in this example that the links do not
reference nodes by name. Instead, links reference the nodes by the index
number of the node in its list, with the first item having an index of zero. For
example, the link
{ "source":1,"target":3,"value":3 }
is a link
from source node index
1
(Ben) to target node index
3
(Zoe). All of the data
is wrapped in a single set of braces to indicate the overall graph object.
Some tools will output JSON, but the format can vary. Gephi can load
data and save data in a variety of formats, including export JSON via a
Gephi plug-in. Its JSON format follows a similar pattern with some minor
variances—for example, Gephi uses the term “edges,” whereas
d3.js
uses
the term “links.” For the same data set shown previously, Gephi will output
JSON like this:
{
"edges":[
{"source":"Ben","target":"Tim","id":"1422",
"attributes":{"Weight":"2.0"},"color":"
