Graphics Reference
In-Depth Information
</
body
>
</
html
>
Process and Model the Data
Create a
supplychain.js
file and open it for editing. Use jQuery to load
the JSON file into a JavaScript object. When the callback completes, use
Aperture utility functions to process the arrays of nodes and links, and
model them for use in your Sankey diagram. The
linkNodes
function will
link them based on their data IDs, and the
weightNodes
function will
calculate and store total flow in and out of each node by summing the value
field of each of its links. The
layout
API will assign a location to each node.
Add a call to make the visualization when it completes, using a method that
you will define next.
jQuery.getJSON(
"supplychain.json"
,
function
(data) {
// Link the nodes from raw data, and enhance with
total flow
// in and out.
aperture.graph
.linkNodes(data.nodes, data.links)
.weightNodes(data.nodes, {
flowIn: {linksIn:
'value'
}, // record sum
value of links in
flowOut: {linksOut:
'value'
} // ... and
out, in each node.
});
// Use layout to assign nodes a location, and
construct the graph.
aperture.layout.flow(data,
function
() {
makeMyGraph(data);
});
});
Visualize the Data
Create the
makeMyGraph
function you invoked in the previous step after
modeling the data. Begin by adding the base plot and a node layer.
