US State Map

forked from NPashaP's block: US State Map

forked from scresawn'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.5;
	}
	#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{
		margin:0;
		font-size:14px;
	}
	#tooltip{
		background:rgba(0,0,0,0.9);
		border:1px solid grey;
		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;
	}
	#tooltip tr td:nth-child(1){
		width:50px;
	}
	#tooltip tr td:nth-child(2){
		text-align:center;
	}
</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.v4.min.js"></script>
<script>

sampleData.push({
   n: d.n,
   state: d.state,
   cases: d.d,
   path: d.d,
    color: colorScaleLog(cases),
   color2:d3.interpolate("#000000", "#ffffff")(Math.round(cases)/100)});
		});
    //console.log(d);
		});
	
	/* draw states on id #statesvg */	
		uStates.draw("#statesvg", sampleData, tooltipHtml);
  })
	d3.select(self.frameElement).style("height", "600px"); 
</script>

</body>

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

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