StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Found a better solution to this issue.</p> <p><a href="http://en.wikipedia.org/wiki/File:Blank_US_Map.svg" rel="nofollow">http://en.wikipedia.org/wiki/File:Blank_US_Map.svg</a></p> <p>Simple SVG(xml document). Simply traverse and change the fill/stroke/whatever values as needed. You may need to convert to raster when done so that IE(groan) works, but it's really a very simple and easy solution.</p> <p>Update: here's a sample javascript+jquery code block that will update the states via a percentage parameter. Transitions from white to blue.</p> <pre><code>for(var i = 0; i < states.length; i++) { var state = states[i]; var stateDom = $("#"+state.id); var domArray = []; //hack to support multiple path state of Michigan if(stateDom.is("path")) domArray.push(stateDom); else { var children = $("#"+state.id + " path"); for(var k = 0; k < children.length; k++){ domArray.push($(children[k])); } } for(var l = 0; l < domArray.length; l++) { var stateObj = domArray[l]; //Onlick event for each state // var closed = function (percentage) { // return function (){ // alert("P"+percentage); // } // }(state.percentage); // stateObj.click(closed); var svgStyle = stateObj.attr("style"); var stylesArray = svgStyle.split(";"); svgStyle = ""; for(var j = 0; j < stylesArray.length; j++) { var styleObj = stylesArray[j].split(":"); if(styleObj[0] == "fill") { var mask = 256 - Math.round((state.percentage)/100 * 256); styleObj[1] = "rgb("+mask+","+mask+",256)"; } svgStyle += styleObj[0]+":"+styleObj[1] +";"; } stateObj.attr("style",svgStyle); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload