example/plane-blur.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <style>
    body, html{ margin: 0;}
  </style>
  <body>
  <script src="d3.js"></script>
  <script src="../dz.js"></script>
  <script>

var perspective = dz.projection.perspective()
  , cameraPos = [0, 0, 5]
  , camera = perspective.camera().position(cameraPos).focalLength(0.3)
  , w = window.innerWidth, h = window.innerHeight
  , sin = Math.sin, cos = Math.cos, pi = Math.PI, tau = pi * 2
  , max = Math.max(w, h), min = Math.min(w, h), diff = max - min
  , r = 200
  // screen scaling
  , svg = d3.select('body').append('svg').attr({width: w, height: h})
  , ranges = [ [0, max] , [ - diff / 2, max - diff / 2] ]
  , screenX = d3.scale.linear().domain([-1, 1]).range(ranges[w < h ? 1 : 0])
  , screenY = d3.scale.linear().domain([1, -1]).range(ranges[w > h ? 1 : 0])
  , filter = svg.selectAll('filter').data(d3.range(10)).enter().append("filter")
      .attr("id", function(d){ return "blur-" + d}).append("feGaussianBlur")
      .attr('stdDeviation', function(d){ return d}).attr('in', 'SourceGraphic')
  , points = dz.points.plane(11).map(dz.matrix().rotateZ(Math.PI / 2).scale(7).multiVector)


function update(){
  this.attr({ 
      cx: function(d){ return screenX(perspective.x(d)) }
    , cy: function(d){ return screenY(perspective.y(d)) }
    ,  r: function(d){ return perspective.scale(d) * r  }
    , filter: function(d){ return 'url(#blur-' + 2 * Math.abs(5 + Math.round(perspective(d)[2])) + ')' }
  })
}

var circle = svg.selectAll('circle').data(points).enter().append('circle').call(update)

d3.timer(function(t){
  t = t / 2000
  perspective.camera().position(dz.matrix().rotateY(t).rotateZ(t/2)
    .multiVector(cameraPos))
  circle.call(update)
})

  </script>
  </body>
</html>