D3 Examples - Bubble world map with button transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
  <script type="text/javascript" src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script>
​
</head>
​
<!-- CSS -->
<style>
.country {
fill: #e6e6e6;
}
.bubble {
fill: rgba(144,22,204, 0.2);
}
.boundary {
fill: none;
stroke: #ffffff;
stroke-width: 1px;
}
button {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 15px;
  color: #262626;
  padding: 5px 8px;
  cursor: pointer;
  display: inline-block;
  margin: 0 10px 10px 0;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
}
button:focus {
  outline: 0;
}
.active {
  background-color: #9016CC;
  border: 1px solid #9016CC;
  color: #ffffff;
}
.tooltip {
  position: fixed;
  text-align: left;
  padding: 10px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 16px;
  pointer-events: none;
  color: #262626;
  opacity: 0;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
}
</style>
​
<body>
  <div id="graphic" class="graphic">
  <div class='key'></div>
  <div class='chart'></div>
</div>
​
  <script type="text/javascript">
  //Margin conventions
  var margin = {top: 50, right: 5, bottom: 30, left: 0};
​
  // Clear existing graphic (for redraw)
  var containerElement = d3.select(".chart");
  containerElement.html('');
​
  var widther = d3.select(".chart").node().clientWidth;
​
  var width = widther - margin.left - margin.right,
      height = (width/1.5) - margin.top - margin.bottom;
​
  var projection = d3.geo.kavrayskiy7()
      .scale(width/4.75)
      .translate([width / 2, height / 2]);
​
  var path = d3.geo.path()
      .projection(projection);
​
  var graticule = d3.geo.graticule();
​
  //Appends the svg to the chart-container div
  var svg = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    queue()
    .defer(d3.json, "world.json")
    .defer(d3.csv, "metoo.csv")
    .await(ready);
​
    function ready(error, world, data) {
      if (error) throw error;
​
      var fmtComma = d3.format(',');
​
      window.dataById = {};
       //Updates map on button click
      var updateChartForHashtag = function (hashtagId) {
        dataById = {};
​
        var hashtagData = data.filter(function(d) { return d.hashtag === hashtagId; })
                              .forEach(function(d) { dataById[d.id] = +d.count; });
​
        d3.selectAll('.bubble')
        .transition()
        .duration(500)
          .attr("r", function(d) {
            var val = dataById[d.properties.id] || 0;
            return (width > 400) ? Math.sqrt(val/175) : Math.sqrt(val/450);
        });
      }
​
      //Circle interactions
      function mouseover(d) {
        //Cirle
         var divTooltip = d3.select('.tooltip')
        d3.select(this).transition().duration(100).style({'stroke': '#9016CC', 'stroke-width': 2})
​
        //Tooltip
        var right = d3.event.pageX > window.innerWidth / 2;
        var offset = right ? divTooltip.node().offsetWidth + 10 : 0;
        divTooltip.transition(300).style('opacity', 1);
        divTooltip.html("<strong>" + d.properties.admin + "</strong><br>" + fmtComma(dataById[d.properties.id]) + " posts");
        divTooltip
          .style("left", (d3.event.pageX - offset) + "px")
          .style("top", (d3.event.pageY - 25) + "px")
      }
      function mouseout(d) {
        //Cirle
         var divTooltip = d3.select('.tooltip')
        d3.select(this).transition().duration(100).style({'stroke': 'none'})
​
        //Tooltip
        divTooltip.transition(300).style('opacity', 0);
      }
​
      //Organizes buttons data
      var hashtags = data.map(function(d) { return d.hashtag;});
      var uniq = d3.set(hashtags).values();
​
      //Buttons
      var button = d3.select(".key").selectAll("button")
        .data(uniq)
        .enter()
        .append("button")
        .attr("class", function (d) {
          if ( d === "#MeToo" ) { return 'active'; }
            else { return 'not-active'; }
        })
        .text(function(d) {return d;})
        .on("click", function(d) {
          updateChartForHashtag(d);
          d3.select(".active").classed("active", false);
          d3.select(this).classed("active", true);
        });
​
      //Appends tooltip
        var Tooltip = d3.select(".chart").append("div")
            .attr("class", "tooltip");
​
      //Filters the data
        var intialData = data.filter(function(d) { return d.hashtag === "#MeToo";});
​
      //Pairs data with country id
​
      intialData.forEach(function(d) { dataById[d.id] = +d.count; });
​
      var dataByAdmin = {};
      intialData.forEach(function(d) { dataByAdmin[d.admin] = +d.count; });
​
      var countries = topojson.feature(world, world.objects.countries).features,
      neighbors = topojson.neighbors(world.objects.countries.geometries);
​
      svg.selectAll(".country")
          .data(countries)
          .enter().insert("path", ".graticule")
          .attr("class", "country")
          .attr("d", path);
​
      svg.insert("path", ".graticule")
          .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
          .attr("class", "boundary")
          .attr("d", path);
​
      var circleGroup = svg.append("g")
          .attr("class", "bubble-group")
          .selectAll(".bubble")
          .data(countries, function(d) { return d.id; })
          .enter();
​
      var circles = circleGroup.append("circle")
          .attr("class", "bubble")
          .attr("transform", function(d) {
                var centroid = path.centroid( d );
                return "translate(" + centroid + ")";
            })
          .attr("r", function(d) {
             var val = dataById[d.properties.id] || 0;
            return (width > 400) ? Math.sqrt(val/150) : Math.sqrt(val/500);
            })
          .on("mouseover", mouseover)
          .on("mouseout", mouseout);
      }
        </script>
</body>
​
</html>
​
    