Chapter 6: Map, Take 3

by Steve Mann

JavaScript

var paper = Raphael(0, 0, 1000, 1000);

paper.setStart();
drawUS(paper);

var mymap = paper.setFinish();

mymap.attr({
    transform: "s0.5,0.5,0,0"
});

var colors = ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"];

var rates = {};

var data = "ND	3|SD	3.9|NE	4.2|HI	4.5|UT	4.6|VT	4.6|WY	4.6|IA	4.8|NH	5.1|MN	5.2|MT	5.3|OK	5.3|VA	5.7|KS	5.9|WV	6.2|AL	6.3|AK	6.3|TX	6.5|ID	6.6|WI	6.8|ME	6.9|NM	6.9|WA	6.9|LA	7|CO	7.1|FL	7.1|MD	7.1|MO	7.1|MA	7.2|OH	7.2|AR	7.4|DE	7.4|NY	7.5|PA	7.5|AZ	8|OR	8|CT	8.1|SC	8.1|IN	8.4|KY	8.5|MS	8.5|TN	8.5|DC	8.6|NJ	8.6|CA	8.7|GA	8.8|MI	8.8|NC	8.9|RI	8.9|IL	9.2|NV	9.5|".split("|");


for (var c = 0; c < data.length; c += 1) {
    rates[data[c].split("\t")[0]] = parseFloat(data[c].split("\t")[1]);    
}

for (var i = 0; i < mymap.length; i += 1) {
    // retrieve the state abbreviation from the object
    var abbr = mymap[i].data('id');
    var unemp_rate = rates[abbr];
    
    // transform the rate (which varies from 3 to 9.5) into a 0-7 index for the color array
    var index = Math.round(unemp_rate) - 3;
    var color = colors[index];
    mymap[i].attr("fill", color);
}



function drawUS(rsr) {
var HI = rsr.path("m 233.08751,519.30948 1.93993,-3.55655 2.26326,-0.32332 0.32332,0.8083 -2.1016,3.07157 -2.42491,0 z m 10.18466,-3.71821 6.14313,2.58657 2.10159,-0.32332 1.61661,-3.87987 -0.64664,-3.39488 -4.2032,-0.48498 -4.04153,1.77827 -0.96996,3.71821 z m 30.71563,10.023 3.7182,5.49647 2.42492,-0.32332 1.13163,-0.48498 1.45495,1.29329 3.71821,-0.16166 0.96997,-1.45495 -2.90991,-1.77827 -1.93993,-3.71822 -2.1016,-3.55654 -5.8198,2.9099 -0.64664,1.77828 z m 20.20765,8.89137 1.29329,-1.93994 4.68817,0.96996 0.64665,-0.48498 6.14312,0.64664 -0.32332,1.2933 -2.58658,1.45494 -4.36485,-0.32332 -5.49648,-1.6166 z m 5.33482,5.17315 1.93994,3.87987 3.07155,-1.13163 0.32333,-1.61662 -1.61661,-2.10159 -3.71821,-0.32332 0,1.29329 z m 6.95143,-1.13163 2.26326,-2.9099 4.68817,2.42492 4.36485,1.13163 4.36486,2.74824 0,1.93993...