example/dot-plot.html

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

var perspective = dz.projection.perspective()
  , cameraPos = [0, 0, 1]
  , camera = perspective.camera().position(cameraPos).focalLength(1)
  , w = window.innerWidth, h = window.innerHeight
  , r = w / 200
  , 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
  , color = d3.scale.linear().range(['green', 'red'])
  // 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])
  , svg = d3.select('body').append('svg').attr({width: w, height: h})
  , line = d3.svg.line()
      .x(function(d){ return screenX(perspective.x(d)) })
      .y(function(d){ return screenY(perspective.y(d)) })
  , points = dz.points.plane(22)
    .map(dz.matrix().rotateZ(Math.PI / 2).scale(1).multiVector)

points.forEach(function(p){
  // y = x * x + z * z
  p[1] = p[0] * p[0] + p[2] * p[2]
}) 

color.domain([0, d3.max(points, function(p){ return p[1] })])

points = points.map(dz.matrix().translate([0, -0.2, 0]).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  }
  })
  .sort(function(a, b){ return perspective.depth(a) - perspective.depth(b) })
}

var circle = svg.selectAll('circle').data(points).enter().append('circle').call(update)
  .style('fill', function(d){ return color(d[1]) })

var text = svg.append('text').text('plot of y = x*x + y*y')
  .attr({x: 30, y: 30 })

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

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