Project 1 Bioinfomatics

forked from NPashaP's block: US State Map

forked from scresawn's block: US State Map

forked from wenzelmk's block: US State Map

forked from scresawn's block: US State Map

forked from Craftbd's block: US State Map finished

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.state{
		fill: none;
		stroke: #a9a9a9;
		stroke-width: 1;
	}
	.state:hover{
		fill-opacity:0.5;
	}
	#tooltip {   
		position: absolute;           
		margin: 10px;
		font: 12px sans-serif;        
		border: 1px;      
		pointer-events: none;         
	}
	#tooltip h4{ //*name of the states*//
		margin:0;
		font-size:18px;
    color: plum;
	}
	#tooltip{ //*#=IED *//
    position: absolute;           
		margin: 10px;
		font: 14px sans-serif;        
		pointer-events: none;   
		background:rgba(0,0,0,0.9);
		border:1px solid grey;
		border-radius:5px;
		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>
 							/* updated version */
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
							/* d3 scale-chromatic, this shows different color scale */
<script>

// d3.max(array2, function(d){return d.cases})    
// array1[2,3,7,8,1]    
// d3.min    
    
// Log Scale
    const logScale = d3.scaleLog()
      .domain([start, end]) /* definelog scale start var has to =1 not 0 */
    const colorScaleLog = d3.scaleSequential(
        (d) => {
          return d3.interpolateOranges(logScale(d)) }
      )   
	
	zika_data.forEach(function(d){
    	//console.log("d:", d);
    	uStatePaths.forEach(function (s) {
        //console.log("s:", s);
        if (d.state == s.n) { 
          d.n = s.n;
        	d.d = s.d;
        	d.id = s.id;
        }
      })

//console.log(zika_data)    
	cases = +d.cases;

sampleData.push({
   n: d.n,
   state: d.state,
   cases: cases,
   path: d.d,
   color: colorScaleLog(cases),
   color2:d3.interpolate("#000000", "#ffffff")(Math.round(cases)/100)});
		});
	//console.log("sampleData:", sampleData);
	/* 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

https://d3js.org/d3-scale-chromatic.v1.min.js