Graphics Reference
In-Depth Information
function
makeMyGraph(data) {
// CREATE THE NODE LINK PLOT
var
graph =
new
aperture.NodeLink(
'#graph'
);
// map from extents of abstract x,y layout to
graphical area
graph.map(
'node-x'
).from(
'x'
)
.using(
new
aperture.Scalar(
'X'
).mappedTo([100,
1100]))
.fromRange(data.nodes);
graph.map(
'node-y'
).from(
'y'
)
.using(
new
aperture.Scalar(
'Y'
).mappedTo([100,
1300]))
.fromRange(data.nodes);
// add a node layer
var
nodeLayer = graph.addLayer(aperture.NodeLayer);
nodeLayer.all(data.nodes);
//...
Next, add the Sankey path layer to draw the links. Map the width from the
flow key you created in the data processing stage. Map color and opacity
from the rate of supply relative to demand to highlight deficits and
surpluses.
//...
// CREATE THE LINK REPRESENTATION.
var
linkLayer = graph.addLayer(
aperture.SankeyPathLayer )
.mapAll({
'source-offset'
: 5,
'target-offset'
: 43,
'sankey-anchor'
:
'bottom'
});
// Create a key to map from flow values to link
