example/dot-matrix.html

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

var p = dz.projection.perspective()
  , w = window.innerWidth
  , h = window.innerHeight
  , r = w / 50
  , svg = d3.select('body').append('svg').attr({width: w, height: h})
  , max = Math.max(w, h), min = Math.min(w, h), diff = max - min
  // screen scaling
  , 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])

var box = dz.points.grid(5).map(dz.matrix().scale(0.5).multiVector)

function transform(box, t){
  return box.map(function(p){ return p.slice(0) }) // copy points
    .map(dz.matrix().rotateX(t).rotateY(t).rotateZ(t).multiVector)
}

// color the circles
svg.selectAll('circle').data(transform(box, 0))
  .enter().append('circle')
  .attr('fill', function(d, i){
    d = box[i] // get original coordinates
    // origin
    if(d[0] === 0 && d[1] === 0 && d[2] === 0) return 'purple'
    // x axis
    if(d[0] > 0 && d[1] === 0 && d[2] === 0) return 'rgba(255,0,0,0.5)' // red
    // y axis
    if(d[0] === 0 && d[1] > 0 && d[2] === 0) return 'rgba(0,255,0,0.5)' // green
    // z axis
    if(d[0] === 0 && d[1] === 0 && d[2] > 0) return 'rgba(0,0,255,0.5)' // blue
    return 'rgba(0,0,0,0.1)'
  })

var circles = svg.selectAll('circle')
d3.timer(function(t){
  var t = t / 1000, f = 1 / t
  if(f < 0.5) f = 0.5
  p.camera().focalLength(f).position([0, 0, f / 1])
  circles.data(transform(box, t)).sort(function(a, b){ 
    return p.depth(a) - p.depth(b) 
  })
  .attr('cx', function(d){ return screenX(p.x(d)) })
  .attr('cy', function(d){ return screenY(p.y(d)) })
  .attr('r', function(d){ return p.scale(d) * r })
})

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