D3 Examples - Zika Map (NAG 02/20/18)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .state{
        fill: none;
        stroke: #efefef;
        stroke-width: 1;
    }
    .state:hover{
        fill-opacity:0.5;
    }
    #tooltip {   
        position: absolute;           
        text-align: center;
        padding: 20px;             
        margin: 10px;
        font: 12px sans-serif;        
        background: blue;   
        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><!-- div to hold tooltip. -->
<svg width="960" height="600" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="uStates.js"></script> <!-- creates uStates. -->
<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src= "zika_2016.csv"></script> <!-- Zika data.-->
<script>
​
    function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
        return "<h4>"+n+"</h4><table>"+
            "<tr><td>Cases</td><td>"+(d.cases)+"</td></tr>"+
            "</table>";
    }
  
  var zikaData = [];
  
  d3.csv("zika_2016.csv", function(data){
    data.forEach(function(d){
        zikaData.push({'state': d.state, 'cases': +d.cases});
      
    })    
  });
  
  //var zikadata={}
  //HTMLElement.dataset
  
    var sampleData ={}; /* Sample random data. */   
    
        zikaData.forEach(function(d){
        uStatePaths.forEach (function (s){
        if (d.state == s.n) {d.n = s.n}
    })
    console.log(zikaData)
            //var cases = , 
          low=Math.round(100*Math.random()), 
                mid=Math.round(100*Math.random()), 
                high=Math.round(100*Math.random());
            sampleData[d]={low:d3.min([low,mid,high]), high:d3.max([low,mid,high]), 
                    avg:Math.round((low+mid+high)/3), color:d3.interpolate("#fcc9ea", "#7a00c1")(low/100)}; 
        });
    
    /* draw states on id #statesvg */   
    uStates.draw("#statesvg", sampleData, tooltipHtml);
    
    d3.select(self.frameElement).style("height", "600px"); 
</script>
​
</body>
    