by Matt Coughlin

US Heatmap:

Goal:

Create a US heatmap, allowing the shade of each state to vary independently. Prevent earthquake-shifting (shifting of the individual states due to scaling on mobile browsers).

Example:

Implementation notes:

HTML:

<div class="heatmap"></div>
        

CSS:

.heatmap {
    background-color:#104983;
}
        

css/heatmap.css

JavaScript:

// Dynamic data
stateCount =
{
    "al":"0",
    "ak":"82",
    "az":"120",
    "ar":"37",
    "ca":"40",
    "co":"54",
    "ct":"60",
    "de":"76",
    "fl":"81",
    "ga":"0",
    "hi":"110",
    "id":"20",
    "il":"90",
    "in":"47",
    "ia":"52",
    "ks":"64",
    "ky":"73",
    "la":"82",
    "me":"0",
    "md":"10",
    "ma":"125",
    "mi":"39",
    "mn":"40",
    "ms":"52",
    "mo":"65",
    "mt":"115",
    "ne":"80",
    "nv":"0",
    "nh":"10",
    "nj":"80",
    "nm":"34",
    "ny":"42",
    "nc":"50",
    "nd":"65",
    "oh":"70",
    "ok":"80",
    "or":"0",
    "pa":"10",
    "ri":"120",
    "sc":"30",
    "sd":"40",
    "tn":"105",
    "tx":"60",
    "ut":"70",
    "vt":"80",
    "va":"0",
    "wa":"16",
    "dc":"20",
    "wv":"30",
    "wi":"44",
    "wy":"52"
};
        

js/heatmap.js