example/plane.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <style>
    body, html{ margin: 0;}
    path{ fill: none; stroke: gray; stroke-width: 5; }
    circle.left-chain { fill: red; }
    circle.right-chain { fill: blue;}
    circle { filter: blur(3px); }
  </style>
  <body>
  <script src="d3.js"></script>
  <script src="../dz.js"></script>
  <script>

var perspective = dz.projection.perspective()
  , cameraPos = [0, 0, 3]
  , r = 10
  , camera = perspective.camera().position(cameraPos).focalLength(1)
  , 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
  , svg = d3.select('body').append('svg').attr({width: w, height: h})
  // fullscreen
  , 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])
  , points = dz.points.plane(35).map(dz.matrix().rotateZ(Math.PI / 2).scale(10).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  }
  })
}

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

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

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