ProjectMc

forked from wlsanders's block: ProjectMc

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.state{
		fill: none;
		stroke: #a9a9a9;
		stroke-width: 1;
	}
	.state:hover{
		fill-opacity:0.5;
	}
	#tooltip {   
		position: absolute;           
		text-align: center;
		padding: 25px;             
		margin: 10px;
		font: 12px sans-serif;  
    color: white;
		background: teal;   
		border: 2px;      
		border-radius: 2px;           
		pointer-events: none;         
	}
	#tooltip h4{
		margin:0;
		font-size:12px;
    color:white;
	}
	#tooltip{
		background:rgba(0,0,0,0.9);
		border:1px solid white;
		border-radius:5px;
		font-size:12px;
		width:auto;
		padding:4px;
		color:white;
		opacity:0;
	}
	#tooltip table{
		table-layout:fixed;
	}
	#tooltip tr td{
		padding:0;
		margin:0;
    color:white;
    font-size: 8px;
	}
	#tooltip tr td:nth-child(1){
		width:50px;
    color: white;
	}
	#tooltip tr td:nth-child(2){
		text-align:center
      color: white;
	}
</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>

function tooltipHtml(n, d){	/* function to create html content string in tooltip div. */
		return "<h4>"+n+"</h4><table>"+
			"<tr><td>Acceptance Percent</td><td>"+(d.percent_accept)+"</td></tr>"+
			"<tr><td>Average Loan Size</td><td>"+(d.average_loan)+"</td></tr>"+
			"<tr><td>Average DTI</td><td>"+(d.average_dti)+"</td></tr>"+
			"</table>";
	}
	
	var sampleData ={"AK":{"average_dti":19.0,"average_loan":17150.0,"percent_accept":0.127},"AL":{"average_dti":20.9,"average_loan":15072.0,"percent_accept":0.094},"AR":{"average_dti":20.8,"average_loan":14555.0,"percent_accept":0.097},"AZ":{"average_dti":18.6,"average_loan":14673.0,"percent_accept":0.141},"CA":{"average_dti":16.9,"average_loan":15351.0,"percent_accept":0.141},"CO":{"average_dti":18.4,"average_loan":15378.0,"percent_accept":0.155},"CT":{"average_dti":17.2,"average_loan":15710.0,"percent_accept":0.154},"DC":{"average_dti":15.7,"average_loan":15927.0,"percent_accept":0.149},"DE":{"average_dti":18.7,"average_loan":15019.0,"percent_accept":0.115},"FL":{"average_dti":19.0,"average_loan":14445.0,"percent_accept":0.117},"GA":{"average_dti":19.3,"average_loan":15413.0,"percent_accept":0.117},"HI":{"average_dti":19.8,"average_loan":15758.0,"percent_accept":0.11},"IA":{"average_dti":18.2,"average_loan":15680.0,"percent_accept":0.141},"ID":{"average_dti":20.0,"average_loan":14639.0,"percent_accept":0.122},"IL":{"average_dti":20.0,"average_loan":15132.0,"percent_accept":0.141},"INKS":{"average_dti":20.0,"average_loan":14566.0,"percent_accept":0.135},"KY":{"average_dti":20.1,"average_loan":15298.0,"percent_accept":0.101},"LS":{"average_dti":16.9,"average_loan":15955.0,"percent_accept":0.101},"MA":{"average_dti":18.0,"average_loan":15949.0,"percent_accept":0.144},"MD":{"average_dti":20.3,"average_loan":15533.0,"percent_accept":0.144},"ME":{"average_dti":19.1,"average_loan":14521.0,"percent_accept":0.134},"MI":{"average_dti":18.9,"average_loan":14881.0,"percent_accept":0.129},"MN":{"average_dti":19.9,"average_loan":14948.0,"percent_accept":0.176},"MO":{"average_dti":20.7,"average_loan":14820.0,"percent_accept":0.118},"MS":{"average_dti":19.7,"average_loan":14172.0,"percent_accept":0.084},"MT":{"average_dti":19.2,"average_loan":15156.0,"percent_accept":0.137},"NC":{"average_dti":21.0,"average_loan":15548.0,"percent_accept":0.119},"ND":{"average_dti":20.3,"average_loan":14656.0,"percent_accept":0.143},"NE":{"average_dti":19.1,"average_loan":15132.0,"percent_accept":0.13},"NH":{"average_dti":17.0,"average_loan":16091.0,"percent_accept":0.151},"NJ":{"average_dti":21.0,"average_loan":15144.0,"percent_accept":0.148},"NM":{"average_dti":18.8,"average_loan":14196.0,"percent_accept":0.121},"NV":{"average_dti":16.7,"average_loan":15037.0,"percent_accept":0.144},"NY":{"average_dti":20.2,"average_loan":14668.0,"percent_accept":0.133},"OH":{"average_dti":20.0,"average_loan":15339.0,"percent_accept":0.123},"OK":{"average_dti":17.9,"average_loan":14135.0,"percent_accept":0.109},"OR":{"average_dti":19.7,"average_loan":15129.0,"percent_accept":0.146},"PA":{"average_dti":17.4,"average_loan":14756.0,"percent_accept":0.125},"RI":{"average_dti":19.9,"average_loan":15185.0,"percent_accept":0.139},"SC":{"average_dti":21.7,"average_loan":14150.0,"percent_accept":0.097},"SD":{"average_dti":20.2,"average_loan":14944.0,"percent_accept":0.121},"TN":{"average_dti":19.6,"average_loan":16072.0,"percent_accept":0.101},"TX":{"average_dti":19.1,"average_loan":15081.0,"percent_accept":0.119},"UT":{"average_dti":18.9,"average_loan":16202.0,"percent_accept":0.131},"VA":{"average_dti":20.6,"average_loan":14545.0,"percent_accept":0.133},"VT":{"average_dti":18.5,"average_loan":15500.0,"percent_accept":0.134},"WA":{"average_dti":19.4,"average_loan":14593.0,"percent_accept":0.148},"WI":{"average_dti":19.5,"average_loan":15134.0,"percent_accept":0.131},"WV":{"average_dti":20.9,"average_loan":15157.0,"percent_accept":0.108},"WY":{"average_dti":20.4,"average_loan":15416.0,"percent_accept":0.14}};

d3.keys(sampleData).forEach(function(key) {
    d = sampleData[key];
    d["color"] = d3.interpolate("#feff99", "#800026")(d.percent_accept/100); 
  });

console.log(sampleData);
	/* draw states on id #statesvg */	
	uStates.draw("#statesvg", sampleData, tooltipHtml);
	
	d3.select(self.frameElement).style("height", "600px"); 
  	console.log(sampleData)
</script>

</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js