Database Reference
In-Depth Information
This network graph is built on an HTML5 canvas, and you can easily embed
it in your web pages. Although it doesn't have the interactivity of NodeXL, it
does give you a very easy way of generating a web-friendly network graph.
Code SampleS
For this example, you
will need to open
the code sample files
in the zip file called
Chapter14.zip, as only
excerpts of the code
are included in this
section, for brevity.
CoLor WHEEL IN HTML5
For the color wheel, you are going to use a visualization called Sunburst from
the JavaScript InfoVis Toolkit. You can download the toolkit from
http://
philogb.github.com/jit/
. This basic example uses the Sunburst trivially.
The code samples include an example of dynamically changing the color and
width of the lines joining the nodes.
The following code samples assume that a JSON structure already has been
setup, in a format like so:
"id": "node1",
"name": "node 1",
"data": {
"$angularWidth": 13.00,
"$color": "#33a",
"$height": 70
},
"adjacencies": [
{
"nodeTo": "node3",
"data": {
"$color": "#ddaacc",
"$lineWidth": 4
}
}
]
}
The first piece of the JSON structure specifies the node properties: the Name
and the definition of the node itself—its color, height, and angular width (the
portion of the circle it occupies). Then, in the adjacencies node, the properties
of each joining line are defined. In the preceding example, Node 1 is connected
to Node 3 with a line width of 4 and an HTML code for color.
A C# web service
to output this JSON
based on the OECD
data source is dis-
cussed in Chapter 9.
Each of these properties is then used to represent an item of data. For exam-
ple, each node is a country, the angular width is the gross domestic product
(GDP) of that country, and the width of the line is the size of the exports to
that country. Figure 14-20 shows how it looks.
