Edge blur filter w/ D3 by wboykinm

index.html

<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>D3 + Leaflet</title>
<style>

@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);

#map {
  width: 960px;
  height: 500px;
}

svg {
  position: relative;
}

</style>

<h1>Gutters and polys</h1>

<p id="map">

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<script>

var map = new L.Map("map", {center: [37.8, -96.9], zoom: 4})
    .addLayer(new L.TileLayer("//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"));

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

// filters go in defs element
var defs = svg.append("defs");

var filter = defs.append("filter")
    .attr("id", "places-blur")
    .attr("height", "150%");

filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 4)
    .attr("result", "blur");

d3.json("us-states.json", function(collection) {
  var transform = d3.geo.transform({point: projectPoint}),
      path = d3.geo.path().projection(transform);

  var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path");

  map.on("viewreset", reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bounds = path.bounds(collection),
        topLeft = bounds[0],
        bottomRight = bounds[1];

    svg.attr("width", bottomRight[0] - topLeft[0])
        .attr("height", bottomRight[1] - topLeft[1])
        .style("left", topLeft[0] + "px")
        .style("top", topLeft[1] + "px");

    g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

    feature
      .attr("d", path)
      .attr("class","mask")
      .style("filter","url(#places-blur)")
      .style("stroke", "#999")
      .style("stroke-width", 0)
      .style("fill-opacity",0.8) 
  }

  // Use Leaflet to implement a D3 geometric transformation.
  function projectPoint(x, y) {
    var point = map.latLngToLayerPoint(new L.LatLng(y, x));
    this.stream.point(point.x, point.y);
  }
});

</script>