Graphics Reference
In-Depth Information
});
//...
Next, define the rose for links out of each state. The base radius from which
the sectors will grow should be configured to leave enough space for both
the state label and the sectors for inflowing links. The scale for both needs to
be the same.
//...
// Define the visual range which the data range will
be mapped to
var
roseStart = 18;
var
roseWidth = 145;
var
roseOutKey = valueRange.mappedTo([0, roseWidth]);
var
roseBaseKey = valueRange.mappedTo([roseStart,
roseStart+roseWidth]);
// Assign colors to each group, which is a number
0-4 in the data.
var
roseColorKey =
new
aperture.Ordinal(
'Groups'
,
[0,1,2,3]).mappedTo([
'rgb(0,138,138)'
,
'rgb(139,69,19)'
,
'rgb(189,74,0)'
,
'rgb(120,114,97)'
]);
// Add the layer
var
outRose = nodeLayer.addLayer( aperture.RadialLayer
);
outRose.map(
'opacity'
).asValue(0.9);
outRose.map(
'sector-count'
).asValue(numSectors);
outRose.map(
'series-count'
)
.from(
'rose.linksOut.series.length'
);
outRose.map(
'base-radius'
)
.from(
'rose.linksIn.totals.sectorMax'
).using(roseBaseKey);
outRose.map(
'radius'
)
.from(
'rose.linksOut.series[].sectors[]'
).using(roseOutKey);
outRose.map(
'fill'
)
