D3 Examples - Muerders US 2016 UEM

xxxxxxxxxx
 
<!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><!-- 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.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>Murders</td><td>"+(cases)+"</td></tr></table>";
    }
  
  murder_data = [];
  
  d3.csv("cases.csv", function (data) {
    data.forEach(function (d) {
      //console.log(d);
        murder_data.push({"state": d.state, "cases": +d.cases});  
      
    })
    //console.log(zika_data);
  
    var sampleData = [];    /* Sample random data. */   
  start = d3.max([1,d3.min(murder_data, function (d) { return d.cases; })]);
  end = 1 + d3.max(murder_data, function (d) { return d.cases });
​
// Log Scale
    const logScale = d3.scaleLog()
      .domain([start, end])
    const colorScaleLog = d3.scaleSequential(
        (d) => {
          return d3.interpolateOranges(logScale(d)) }
      )   
    
    murder_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>
​
    