Visualizing Proportions - Data Points: Visualization That Means Something - page 174

Similarly, lines 264-293 create buttons to trigger the male/female filter.
We can get rid of that, too.
You're close to fully customizing the voyager to the spending data. Go back
to the filter() function at line 213. Again, update the function so that you
can filter by the spending category instead of occupation.
Here's line 222 as-is:
var s:String = String(d.data[“occupation”]).toLowerCase();
Change occupation to category:
var s:String = String(d.data[“category”]).toLowerCase();
Next up on the customization checklist is color. If you compiled the code
now and ran it, you would get a reddish stacked area graph, as shown in
Figure 5-33. You want more contrast though.
Color is specified in two places. First lines 86-89 specify stroke color and
color everything red:
shape: Shapes.POLYGON,
lineColor: 0,
fillValue: 1,
fillSaturation: 0.5
Then line 105 updates saturation (the level of red), by count. The code for
the SaturationEncoder() is in lines 360-383. We're not going to use satura-
tion; instead, explicitly specify the color scheme.
First, update lines 86-89 to this:
shape: Shapes.POLYGON,
lineColor: 0xFFFFFFFF
Now make stroke color white with l lineColor. . If there were more spending
categories, you probably wouldn't do this because it'd be cluttered. You
don't have that many though, so it'll make reading a little easier.
Next, make an array of the colors you want to use ordered by levels. Put it
toward the top around line 50:
private var _reds:Array = [0xFFFEF0D9, 0xFFFDD49E, 0xFFFDBB84, 0xFFFC8D59,
0xFFE34A33, 0xFFB30000];