d3_interactive/usa.html

<!DOCTYPE html>
<html>
<head>
	<title>Taxa de desemprego nos EUA em agosto de 2016</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
	<style>

		.counties {
		  fill: none;
		}

		.states {
		  fill: none;
		  stroke: #eee;
		  stroke-linejoin: round;
		}
    #tooltip {
      position: absolute;
      width: 240px;
      height: auto;
      padding: 10px;
      background-color: white;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      pointer-events: none;
    }
    #tooltip.hidden {
      display: none;
      }

    #tooltip p {
      margin: 0;
      font-family: sans-serif;
      font-size: 16px;
      line-height: 20px;
      }
	</style>
</head>
<body>
  <main id="container" class="container">
    <div id="tooltip" class="hidden">
      <p><strong><span id="nome"></span></strong></p> 
      <p>Taxa de desemprego: <span id="taxa"></span>%</p>
    </div>
    <header>
	   <h1>Taxa de desemprego nos EUA em agosto de 2016</h1>
   </header>
  <div id="map"></div>
  </main>
  
<script>

let width = 960,
    height = 600;

let rateById = d3.map();
let nameById = d3.map();

//Create a quantize color scale here
// We want to see the unemployment rate that goes from 2 to 10%
// display the colors in nine different levels of greens

let quantize = d3.scaleQuantize()
    .range(d3.schemeGreens[9])
    .domain([2,10])

let path = d3.geoPath();

let svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

let promises = [
  d3.json("data/us.json"),
  d3.tsv("data/unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); }),
  d3.csv("data/county_names.csv", function(d) { nameById.set(d.id, d.name); })
]

Promise.all(promises).then(ready);

function ready([us]) {
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("fill", function(d) { return quantize(rateById.get(d.id)); }) //
      .attr("d", path)
       //.append("title")
       //.text(function(d) { return "Taxa de desemprego: " + rateById.get(d.id) + "%"; })
      .on("mouseover", function(d){
          d3.select(this)
          .style("cursor", "pointer")
          .attr("stroke-width", 3)
          .attr("stroke","#FFF5B1");

          var coordinates = [0, 0];
          coordinates = d3.mouse(this); // obtém a posição do mouse relativa a this
          var x = coordinates[0] + 10;
          var y = coordinates[1] + 20; // descontando a posição do svg

          showTooltip(d.id, x, y);
        })
      .on("mouseout", function(d){
        d3.select(this)
        .style("cursor", "default")
        .attr("stroke-width", 0)
        .attr("stroke","none");
        hideTooltip();
      });

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
}

function showTooltip(county_id, x, y){
    d3.select("#tooltip")
    .style("left", x + "px")
    .style("top", y + "px")
    .select("#taxa")
    .text(rateById.get(county_id));
    d3.select("#tooltip")
    .classed("hidden", false);
    d3.select("#tooltip")
    .select("#nome")
    .text(nameById.get(county_id))
}

function hideTooltip(){
    d3.select("#tooltip")
    .classed("hidden", true);
}


</script>
<!-- Bootstrap javascript files -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>