Graphics Reference
In-Depth Information
The first four lines set up the web page and load the D3 library. This is
followed by the beginning of the script, where the first portion includes the
graph data. The graph data is defined in JavaScript as follows:
• A list of nodes is contained in square brackets (
[]
).
• Each node is an object contained in curly braces (
{}
).
• Each attribute is identified by its name and value pair (
"itemtype":
"value"
).
Note that the links refer to the nodes based on the node order. For example,
the first link has a source node 0 (
Ann
) and a target node 1 (
Ben
). In
JavaScript, complex data objects such as this graph can be accessed by
dot
notation
. For example,
graph.nodes
is a reference to the list of nodes,
and
graph.nodes[0].name
would have the value
Ann
.
<script>
// this is the graph data
graph = {
"nodes":[
{"name":"Ann","NumEmail":1,"SumSize":100},
{"name":"Ben","NumEmail":4,"SumSize":500},
{"name":"Tim","NumEmail":2,"SumSize":200},
{"name":"Zoe","NumEmail":3,"SumSize":400}
],
"links":[
{"source":0,"target":1,"NumEmail":1,"SumSize":100},
{"source":1,"target":2,"NumEmail":1,"SumSize":100},
{"source":2,"target":3,"NumEmail":1,"SumSize":100},
{"source":1,"target":3,"NumEmail":2,"SumSize":300}
]
}
The SVG drawing area of the web page is created next. In this example, the
width and height have been set up as separate variables so that they can be
referenced later when calculating layouts.
