Graphics Reference
In-Depth Information
.from(
'rose.linksOut.series[].group'
).using(roseColorKey);
//...
Add a second layer for the links coming into each state, but with its scale
inverted and its base offset by one to leave a gap representing the anchor
line.
//...
// The inward rose inverts the scale and shifts the
base one pixel
var
roseInKey = valueRange.mappedTo([0, -roseWidth]);
var
roseInBaseKey = valueRange.mappedTo(
[roseStart-1, roseStart + roseWidth - 1]);
// Add the layer
var
inRose = nodeLayer.addLayer( aperture.RadialLayer
);
inRose.map(
'opacity'
).asValue(0.35);
inRose.map(
'sector-count'
).asValue(numSectors);
inRose.map(
'series-count'
)
.from(
'rose.linksIn.series.length'
);
inRose.map(
'base-radius'
)
.from(
'rose.linksIn.totals.sectorMax'
).using(roseInBaseKey);
inRose.map(
'radius'
)
.from(
'rose.linksIn.series[].sectors[]'
).using(roseInKey);
inRose.map(
'fill'
)
.from(
'rose.linksIn.series[].group'
).using(roseColorKey);
// Grow the labels a bit by state totals
var
labelKey = valueRange.mappedTo([18, 48]);
// Add label layer
var
label = nodeLayer.addLayer( aperture.LabelLayer );
label.map(
'font-weight'
).asValue(
'bold'
);
label.map(
'font-outline'
).asValue(
'white'
);
label.map(
'font-outline-width'
).asValue(3);
label.map(
'text'
).from(
'id'
);
