Graphics Reference
In-Depth Information
width
var
flowKey =
new
aperture.Scalar(
'Flow Volume'
)
.expand(data.nodes,
'flowIn'
)
.expand(data.nodes,
'flowOut'
)
.mappedTo([1,36]);
// map data-driven attributes from link data fields
linkLayer.map(
'stroke-width'
).from(
'value'
).using(flowKey);
linkLayer.map(
'source'
).from(
'source'
);
linkLayer.map(
'target'
).from(
'target'
);
// define range of supply rates to map link color
and opacity from
var
rates =
new
aperture.Scalar(
'Supply (+/-% of
Demand)'
,
[-20, 20]);
// map rate to red (deficit), grey (on target),
blue (surplus) range
linkLayer.map(
'stroke'
).from(
'rate'
)
.using(rates.mappedTo([
'#e00'
,
'#666'
,
'#08a'
]));
// map rate data to a range of opacities (less
opaque when
// on target).
linkLayer.map(
'opacity'
).from(
'rate'
)
.using(rates.mappedTo([0.8, 0.2, 0.8]));
// finally, make a link for each data object
linkLayer.all(data.links,
'id'
);
//...
Now that you have added the links to show flow, create the representation
for each facility in the supply chain. Each node will have an icon, a bar at
the stem of outgoing flow, and a label. If you are using your own data and
