forked from NPashaP's block: US State Map
xxxxxxxxxx
<meta charset="utf-8">
<style>
.state {
fill: none;
stroke: #a9a9a9;
stroke-width: 1;
}
.state:hover {
fill-opacity:0.7;
stroke-opacity: 1;
stroke-width: 2;
stroke: #444 !important;
z-index: 20;
}
.tooltip {
background-color: #f7f7f7;
padding: 3px 12px;
font-family: sans-serif;
border: 1px solid #bbbbbb;
box-shadow: 1px 1px 4px #bbbbbb;
}
.tooltip_title {
font-weight: bold;
font-size: 14px;
margin: 5px 0;
max-width: 300px;
word-wrap: normal;
}
.tooltip_body {
font-weight: normal;
margin: 5px 0;
}
#tooltip {
position: absolute;
text-align: center;
padding: 20px;
margin: 10px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px;
border-radius: 2px;
pointer-events: none;
}
#tooltip h4 {
font-weight: bold;
font-size: 14px;
margin: 5px 0;
max-width: 300px;
word-wrap: normal;
}
#tooltip {
background-color: #f7f7f7;
padding: 3px 12px;
font-family: sans-serif;
border: 1px solid #bbbbbb;
box-shadow: 1px 1px 4px #bbbbbb;
font-weight: normal;
margin: 5px 0;
}
</style>
<body>
<div id="tooltip"></div><!-- div to hold tooltip. -->
<svg width="960" height="600" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="uStates.js"></script> <!-- creates uStates. -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var sampleData ={}; /* Sample random data. */
var states = ["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT",
"MA", "ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", "WV",
"KY", "OH", "MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA",
"AZ", "NV", "UT", "CO", "NM", "OR", "ND", "SD", "NE", "IA",
"MS", "IN", "IL", "MN", "WI", "MO", "AR", "OK", "KS", "LA",
"VA"];
states.forEach(function(d) {
sampleData[d] = {
color: "#ccc"
}
});
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
var dataAll = [{"contbr_st":"AK","D":700275.0400000006,"G":0.0,"L":4823.9,"R":490149.4499999998},{"contbr_st":"AL","D":1163417.2799999996,"G":20.0,"L":5328.45,"R":2610450.1400000029},{"contbr_st":"AR","D":1773009.9999999974,"G":550.0,"L":2906.99,"R":1749283.2299999995},{"contbr_st":"AZ","D":3922612.560000008,"G":5010.0,"L":9755.55,"R":4132127.0000000019},{"contbr_st":"CA","D":71799609.4800013602,"G":57263.0,"L":77228.65,"R":25346868.3500000574},{"contbr_st":"CO","D":7316830.7600000296,"G":3697.0,"L":21618.0,"R":3889471.7000000007},{"contbr_st":"CT","D":5915986.4899999946,"G":6456.0,"L":18630.55,"R":3273860.9500000007},{"contbr_st":"DC","D":9256598.7499999702,"G":1330.0,"L":11500.0,"R":1817153.0099999998},{"contbr_st":"DE","D":533793.55,"G":250.0,"L":2700.0,"R":325922.0},{"contbr_st":"FL","D":16351493.9100000281,"G":5749.0,"L":42877.45,"R":21857541.2400000431},{"contbr_st":"GA","D":4508746.929999995,"G":6851.0,"L":14523.7,"R":5654693.6400000006},{"contbr_st":"HI","D":1213047.6300000006,"G":1250.0,"L":10750.0,"R":471519.45},{"contbr_st":"IA","D":1643695.51,"G":50.0,"L":2345.35,"R":1687624.3299999991},{"contbr_st":"ID","D":588066.3499999999,"G":0.0,"L":5400.0,"R":1008945.5400000003},{"contbr_st":"IL","D":12464738.829999974,"G":13152.0,"L":21440.3,"R":5540928.9800000014},{"contbr_st":"IN","D":2275397.9699999993,"G":570.0,"L":4193.2,"R":2654494.3400000036},{"contbr_st":"KS","D":1096402.5000000016,"G":2350.0,"L":2050.0,"R":1497350.2799999998},{"contbr_st":"KY","D":1574753.8800000008,"G":1500.0,"L":1500.0,"R":1430445.4499999995},{"contbr_st":"LA","D":1500355.3000000005,"G":250.0,"L":2786.3,"R":3418563.1400000001},{"contbr_st":"MA","D":15021138.4099998642,"G":15799.0,"L":10085.51,"R":3186544.6300000022},{"contbr_st":"MD","D":11569792.7399999797,"G":7944.0,"L":9340.4,"R":3227395.0500000007},{"contbr_st":"ME","D":1679195.3299999991,"G":3530.0,"L":1100.0,"R":551768.9399999997},{"contbr_st":"MI","D":5366635.3999999892,"G":8563.0,"L":18288.65,"R":4922058.5299999984},{"contbr_st":"MN","D":4216979.8300000001,"G":6984.0,"L":9848.05,"R":2162269.4100000006},{"contbr_st":"MO","D":3300001.3999999994,"G":1541.0,"L":6027.3,"R":3059889.1000000024},{"contbr_st":"MS","D":479838.4500000001,"G":0.0,"L":809.45,"R":1190837.3599999994},{"contbr_st":"MT","D":634965.5599999997,"G":750.0,"L":793.8,"R":872661.8800000001},{"contbr_st":"NC","D":4986584.3300000113,"G":7181.0,"L":16064.4,"R":4321085.2100000037},{"contbr_st":"ND","D":179659.76,"G":0.0,"L":0.0,"R":349025.61},{"contbr_st":"NE","D":783219.5500000002,"G":0.0,"L":1674.1,"R":785596.1599999999},{"contbr_st":"NH","D":2018309.9899999981,"G":3810.0,"L":7175.45,"R":1044023.9600000002},{"contbr_st":"NJ","D":8599322.7499999553,"G":3005.0,"L":4469.7,"R":7797212.5100000026},{"contbr_st":"NM","D":2680231.1400000039,"G":2085.0,"L":33900.12,"R":1013304.5699999998},{"contbr_st":"NV","D":2096226.5799999996,"G":600.0,"L":18441.55,"R":2135815.6799999997},{"contbr_st":"NY","D":43310757.9900003299,"G":28477.0,"L":60683.8,"R":12747490.7899999823},{"contbr_st":"OH","D":4818281.2100000093,"G":2850.0,"L":10363.15,"R":8400680.0800000057},{"contbr_st":"OK","D":1790616.7999999975,"G":3200.0,"L":1806.75,"R":2444463.6899999995},{"contbr_st":"OR","D":5559883.5100000231,"G":3810.0,"L":3114.95,"R":1765710.379999999},{"contbr_st":"PA","D":8895512.1100000031,"G":6930.0,"L":10191.9,"R":6208658.5900000036},{"contbr_st":"RI","D":1444365.1299999992,"G":1116.0,"L":0.0,"R":306686.7000000001},{"contbr_st":"SC","D":1865784.1300000006,"G":750.0,"L":3704.98,"R":3921015.410000002},{"contbr_st":"SD","D":365900.2700000004,"G":0.0,"L":500.0,"R":475121.06},{"contbr_st":"TN","D":2942901.619999995,"G":650.0,"L":6488.7,"R":4371244.3600000041},{"contbr_st":"TX","D":16278771.6999999303,"G":4826.0,"L":54621.63,"R":36475358.1000000983},{"contbr_st":"UT","D":1226375.0,"G":600.0,"L":10099.65,"R":1506824.1799999999},{"contbr_st":"VA","D":9634409.0699999798,"G":5171.0,"L":24870.09,"R":7013566.6600000039},{"contbr_st":"VT","D":3393277.5200000005,"G":955.0,"L":1259.25,"R":212071.94},{"contbr_st":"WA","D":11772869.2299999632,"G":14366.0,"L":20100.75,"R":3680650.2900000047},{"contbr_st":"WI","D":2881826.5900000059,"G":10664.0,"L":4759.1,"R":3060633.7600000016},{"contbr_st":"WV","D":579925.3500000001,"G":250.0,"L":2891.9,"R":456458.58},{"contbr_st":"WY","D":304527.98,"G":0.0,"L":2000.0,"R":689628.1}];
function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
var numb_format = d3.format(",");
return "<h4>"+n+"</h4>"+
"<pre>" + 'Total: ' + numb_format(d.tot) +
"<pre>" + 'Democrat: ' + numb_format(d.dem) +
"<pre>" + 'Republican: ' + numb_format(d.rep) +
"</pre>";
}
dataAll
.forEach(function(d){
stateCode = d["contbr_st"];
if (states.indexOf(stateCode) != -1) {
var tot = Math.round(d["D"] + d["R"]),
dem = Math.round(d["D"]),
rep = Math.round(d["R"]);
sampleData[stateCode]={
tot:tot,
dem:dem,
rep:rep,
color:d3.interpolate("red", "blue")(dem / tot)
};
} else {
}
});
/* draw states on id #statesvg */
uStates.draw("#statesvg", sampleData, tooltipHtml);
d3.select(self.frameElement).style("height", "600px");
</script>
</body>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js