Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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 &lt; 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 &lt; children.length; k++){ domArray.push($(children[k])); } } for(var l = 0; l &lt; 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 &lt; 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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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