Graphics Reference
In-Depth Information
var
graphData = aperture.graph.fromGraphML(data, {
left: 50,
top: 10,
width: 1500,
height: 750
});
var
numSectors = 24;
// enhance nodes with link rose data
aperture.graph.linkRose(graphData.nodes, {
value:
'value'
,
group:
'group'
,
numSectors : numSectors
});
// construct the graph
construct(graphData.nodes, numSectors);
});
Now create the
construct
function that you just called, passing it the data.
Create the root visual elements, mapping node locations from the
x
and
y
of
each data object, and then adding the nodes to a new layer. The next step is
to add the rose layers. Before doing that, find the upper range of the sum of
values in and out of each state. This will be used to scale the visuals.
function
construct(nodes, numSectors) {
// Create the root element for nodes and links
var
usa =
new
aperture.NodeLink(jQuery(
'body'
).get(0));
usa.map(
'node-x'
).from(
'x'
);
usa.map(
'node-y'
).from(
'y'
);
// Create and populate the node layer
var
nodeLayer = usa.addLayer(aperture.NodeLayer);
nodeLayer.all(nodes);
// Find the data range
var
valueRange =
new
aperture.Scalar(
'Transported
Value ($M)'
, [0]);
nodes.forEach(
function
(node) {
valueRange.expand(
node.rose.linksIn.totals.sectorMax
+ node.rose.linksOut.totals.sectorMax);
