TopoJSON with Random Gaussian Blurs (counties)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  
  <style>
    body {
      background-color: black;
    }
  </style>
</head>

var defs = svg.select('defs');

var path = d3.geoPath();

d3.json('https://unpkg.com/us-atlas@1/us/10m.json', function(error, us) {
      if (error) {
        throw error;
      }

var geoJsonFeatureCollection = topojson.feature(us, us.objects.counties);

defs.selectAll('filter')
        .data(geoJsonFeatureCollection.features)
        .enter().append('filter')
        .attr('id', function(d) {
          return 'blur_' + d.id;
        })
        .append('feGaussianBlur')
        .attr('stdDeviation', d3.randomUniform(0.5, 5));

svg.selectAll('path')
        .data(geoJsonFeatureCollection.features)
        .enter().append('path')
        .attr('d', path)
        .style('fill', 'transparent')
        .style('stroke', 'steelblue')
        .style('stroke-width', 0.5)
        .style('filter', function(d) {
          return 'url(#blur_' + d.id + ')';
        })
        .on('mouseover', function(d) {
          d3.select(this)
            .style('stroke-width', 2)
            .style('filter', '')
            .raise();
        })
        .on('mouseout', function(d) {
          d3.select(this)
            .transition()
            .delay(150)
            .style('stroke-width', 0.5)
            .style('filter', 'url(#blur_' + d.id + ')');
        });
    });
  </script>
</body>

</html>

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

https://unpkg.com/topojson-client@3.0.0