Graphics Reference
In-Depth Information
Figure 12-4:
Sankey diagrams are perfect for visualizing supply chains. In
this automotive example, flow reflects value of goods supplied, and color
represents variance from optimal rate of supply.
Constructing a Sankey Diagram
This section steps through the process of coding the supply chain
visualization shown in
Figure 12-4
.
To try this yourself, download the
example package for this chapter provided with the Supplementary
Materials on this topic's companion website.
Although it is always more rewarding to use real data when experimenting
with visualization, supply chain data is often proprietary and difficult to
find.Inthiscase,thedatahasbeenhandcraftedinsteadtoillustratehowyou
might approach building a solution for this kind of problem. This example
uses version 1.1 of the Aperture JS library, which, in addition to Sankey
support, includes icon and layout services that will be useful in this case.
As with most graph data, nodes and links are supplied as arrays. Here,
JavaScript Object Notation (JSON) form is used:
{
"nodes": [
{
"name": "Steel",
"type": "rawmaterials",
"id": 100
},
{
"name": "Assembly Plant A",
"type": "manufacturing",
"id": 1
}, ...
],
"links": [
{
"sourceId": 100,
"targetId": 2,
"value": 145,
"rate": 0.0
