It turns out most of what I did in my last post, Installing D3 TopoJSON us-states on Fedora, was unnecessary, but I did create an interactive state map using the D3, d3-tip, and jQuery libraries and the GeoJson encoding format. I did use ocr2ocr to convert census state data to GeoJson.

First, I find the maximum value of each category (Income, Sales, Property, Corporate, and Total) and then use the maximum to build scale functions to map it to rgb (0-255).
[cc lang=”javascript” tab_size=”2”]
//// Build max map
for (var state in data) {
for (var type in data[state]) {
if (!(type in max) || parseInt(data[state][type]) > parseInt(max[type])) {
max[type] = data[state][type];
}
}
}

//// Build basic scaling functions
for (var type in max) {
scales[type] = d3.scale.linear()
.domain([0, max[type]])
.range([255, 0])
}
[/cc]

Check out the full source code for the whole picture, but here is how the rgb values are set for each state:
[cc lang=”javascript” lines=”-1”]
function getRgb(name, area) {
if (!(name in data)) return {};
var rgb = {};
var areas = area.split(‘+’);
//// create area in scales if it doesn’t exist
if (!(area in scales)) {
var mx = 0;
for (var i = 0; i < areas.length; i++) {
mx += parseInt(max[areas[i]]);
}
scales[area] = d3.scale.linear()
.domain([0, mx])
.range([255, 0]);
}
//// build rgb
for (var color in colorcode) {
var value = 0;
for (var i = 0; i < areas.length; i++) {
value += parseInt(data[name][areas[i]]);
}
rgb[color] = Math.floor(scales[area](value)*colorcode[color]);
}
var rgbstr = ‘rgb(‘+rgb.r+’,’+rgb.g+’,’+rgb.b+’)’;
return rgbstr;
}
[/cc]

Check out the map.