Bubble world map with button transitions

<!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>

<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>

// 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js