D3 Examples - Linked mouseover

xxxxxxxxxx
 
<!DOCTYPE html>
​
<html>
<head>
<style>
  #mmmap {
  background-color: #fff; 
  width:960px;
  height:430px;
}
.mmcountry {
  fill: #dfdfdf;
  stroke: #d4d4cd;
  stroke-width: .5px;
  stroke-linejoin: round;
}
​
.countryHover {
  fill: #83A41C;
}
​
.countryHover:hover {
  fill: #9FBC00;
  stroke: #fff;
  stroke-width: 1.5;
}
​
.mminfo {
  color: #222; 
  font-size: 1.2em;
  padding: 12px 15px 13px 15px;
  background: #e2e3e3;
  position: absolute;
  border:2px solid #83A41C;
  border-radius:3px;
}
​
.mminfo:hover {
  background: #9FBC00;
  filter:alpha(opacity=80);
  cursor: pointer;
  color: #fff;
}
</style>
​
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script> 
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
​
<body>
 <div id="mmmap"></div> 
 
  
  <script>
    // The SVG container for map
 var width = 960,
   height = 430;
​
 var projection = d3.geo.equirectangular().translate([470, 260]).scale(155);
​
 var path = d3.geo.path().projection(projection);
​
 var svg = d3.select("#mmmap").append("svg").attr("width", width).attr("height", height);
​
 var tt_Bolivia = d3.select("#mmmap").append("div").attr("class", "mminfo").attr("id", "tt_Bolivia");
 var tt_Kenya = d3.select("#mmmap").append("div").attr("class", "mminfo").attr("id", "tt_Kenya");
​
 tt_Bolivia.attr("style", "left:190px;top:230px").html("<div class='mmtitle'>BOLIVIA</div>");
  
    tt_Kenya.attr("style", "left:472px;top:275px").html("<div class='mmtitle'>KENYA</div>");
​
 queue()
     .defer(d3.json, "d3-world.json")
     .defer(d3.tsv, "world-country-names.tsv")
     .await(ready);
​
 function ready(error, world, names) {
​
   var countries = topojson.feature(world, world.objects.countries).features;
   console.log('returning geometry');
   console.log(countries[7]);
   countries.forEach(function(d) {
      d.name = names.filter(function(n) { return d.id == n.id; })[0].name;
   });
   var country = svg.selectAll(".mmcountry").data(countries);
   country.enter().insert("path").attr("class", function(d, i) {
     return hoverSpecific(d, i);
   }).attr("title", function(d, i) {
     return d.name;
   }).attr("d", path);
 }
​
 function hoverSpecific(d, i) {
   if (d.name == 'Bolivia' || d.name == 'Kenya') return 'mmcountry countryHover'
   else return 'mmcountry';
 }
  </script>
</body>
</html>
    