gooey map by almccon

D3 map with blobby effects forked from nbremer‘s block: Gooey effect - Rotating circles - Blending colors

NOTE: we made this on-the-fly in the Stamen dataviz workshop, so it’s pretty rough!

forked from mbostock‘s block: U.S. Counties TopoJSON

forked from enjalot‘s block: WWSD #5: d3 + TopoJSON

forked from enjalot‘s block: WWSD #7: d3 mouse interaction

forked from almccon‘s block: WWSD #7: d3 mouse interaction

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    background: #aff;
  }

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
  
circle {
  fill: #fff;
  fill-opacity: 0.4;
  stroke: #111;
}
  
circle.selected {
  fill: red;
}
  
path.active {
  fill: #ff7f7f;
}
  circle.active {
    fill: #f00;
  }


</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>

<script>

var width = 960,
    height = 500;

var projection = d3.geo.winkel3()
	.scale(width/2/Math.PI)
	.translate([width/2,height/2]);
  
var path = d3.geo.path()
  .projection(projection)

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  			var defs = svg.append("defs");
			var filter = defs.append("filter").attr("id","gooeyCodeFilter");
      
			filter.append("feGaussianBlur")
				.attr("in","SourceGraphic")
				.attr("stdDeviation","10")
				//to fix safari: //stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
				.attr("color-interpolation-filters","sRGB") 
				.attr("result","blur");
       
			filter.append("feColorMatrix")
				.attr("in","blur")
		  	.attr("mode","matrix")
				.attr("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9")
				.attr("result","gooey");
  
  
var url = "//enjalot.github.io/wwsd/data/world/world-110m.geojson";
var url2 = "//enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
d3.json(url, function(error, countries) {
d3.json(url2, function(error, places) {
  if (error) throw error;
  
  console.log("geojson", countries, places);
 
  var svgwrapper = svg.append("g")
			.style("filter", "url(#gooeyCodeFilter)");
  var svgunfiltered = svg.append("g");
  
  var colorscale = d3.scale.category20();
  var colors = ["green", "limegreen", "darkgreen"]
  
  svgwrapper.selectAll("path")
    .data(countries.features)
  .enter().append("path")
    .attr("d", path)
    .style("fill", function(d,i) {
      return colors[i%3];
    
  })
  			//.style("filter", "url(#gooeyCodeFilter)");

   // .on("mouseover", function(d) {
     // svgunfiltered.selctAll("path")
  	//})
  
  /*
  svgwrapper.selectAll("circle")
  .data(places.features)
  .enter().append("circle")
  .attr({
    r: 5,
    cx: function(d) { return projection(d.geometry.coordinates)[0]},
    cy: function(d) { return projection(d.geometry.coordinates)[1]}
  })
  .on("mouseover", function(d) {
    console.log("just had a mouseover", d3.select(d));
    d3.select(this)
      .classed("selected",true)
    	.attr("r", 20);
    var currentX =  projection(d.geometry.coordinates)[0];

    
    d3.select(this)
    	.attr("cx", function(d) {
        return projection(d.geometry.coordinates)[0];
   	  })
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .classed("selected",false)
    	.transition()
      .attr("r",5);
    
    svg.selectAll("circle")
    	//.filter(function(d) { return !d.classed("selected");})
    	.style("fill","gray")
    	.attr("cx", function(d) {
              return projection(d.geometry.coordinates)[0];

    })
  })
  */
  
  
});
});

</script>