Old school D3 from simpler times

All examples By author By category About

TylerVaughan

Full window Github gist

Finished map

Built with blockbuilder.org

forked from TylerVaughan's block: fresh block

<!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{
		margin:0;
		font-size:18px;
    color: plum;
	}
	#tooltip{
    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>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<script>
	function tooltipHtml(n, cases){	/* function to create html content string in tooltip div. */
		return "<h4>"+n+"</h4><table>"+
			"<tr><td>Cases</td><td>"+(cases)+"</td></tr></table>";
	}
  
  zika_data = [];
  
  d3.csv("zika_2016.csv", function (data) {
    data.forEach(function (d) {
      //console.log(d);
    	zika_data.push({"state": d.state, "cases": +d.cases});  
      
    })
    //console.log(zika_data);
  
	var sampleData = [];	/* Sample random data. */	
  start = d3.max([1,d3.min(zika_data, function(d) {return d.cases; })]);
  end = 1 + d3.max(zika_data, function (d) { console.log(d); return d.cases });
    
// Log Scale
    const logScale = d3.scaleLog()
      .domain([start, end])
    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