Old school D3 from simpler times

All examples By author By category About

jdubson

Full window Github gist

Hilarity vs Trumpiness

forked from NPashaP's block: US State Map

<!DOCTYPE html>
<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>
<svg width="960" height="600" id="statesvg"></svg> 
<script src="uStates.js"></script> 
<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