jadiehm · November 14, 2017 22:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 	<script type="text/javascript" src="http://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="http://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>
diff --git a/metoo.csv b/metoo.csv
diff --git a/world.json b/world.json
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://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="http://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>