humble software development

Trig Demo - D3

The first thing that should be shown in any Trigonometry class, done in d3.js Compare to: http://www.reddit.com/tb/bnzgx.
trig-d3.js: (hide)

//
// Trig
//

(function () {

  var
    ID_TRIG = '#trig',
    X1      = 'x1',
    X2      = 'x2',
    Y1      = 'y1',
    Y2      = 'y2';

  var
    data    = [],
    width   = 760,
    height  = 260,
    xmin    = -1.2,
    xmax    = 5,
    ymin    = -height * (xmax - xmin) / width / 2,
    ymax    = -ymin,
    xScale  = d3.scale.linear(),
    yScale  = d3.scale.linear(),
    vis     = d3.select(ID_TRIG).append('svg:svg'),
    decor   = vis.append('svg:g'),
    graph   = vis.append('svg:g'),
    path    = graph.append('svg:path'),
    b       = graph.append('svg:line'),
    c       = graph.append('svg:line'),
    circle  = graph.append('svg:circle'),
    dot     = graph.append('svg:circle'),
    label   = graph.append('svg:text'),
    sine    = d3.svg.line(),
    time    = 0,
    i;

  for (i = 0; i < 84; i++) {
    data.push(i * 10 / 84);
  }

  xScale
    .domain([xmin, xmax])
    .range([0, width]);

  yScale
    .domain([ymin, ymax])
    .range([0, height]);

  vis
    .attr('class', 'trig')
    .attr('width', width)
    .attr('height', height);
   
  sine
    .x(function (d, i) { return xScale(d); })
    .y(function (d, i) { return yScale(Math.sin(d - time)); });

  // X-Axis
  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(xmin))
    .attr(Y1, yScale(0))
    .attr(X2, xScale(xmax))
    .attr(Y2, yScale(0));

  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(Math.PI))
    .attr(Y1, yScale(0))
    .attr(X2, xScale(Math.PI))
    .attr(Y2, yScale(0) + 8);

  decor.append("svg:text")
    .text(String.fromCharCode(960))
    .attr("x", Math.round(xScale(Math.PI)))
    .attr("y", (yScale(0)) + 24)
    .attr("text-anchor", "middle");

  // Y-Axis
  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(0))
    .attr(Y1, yScale(ymin))
    .attr(X2, xScale(0))
    .attr(Y2, yScale(ymax));

  // Time
  label
    .attr("x", 2)
    .attr("y", 24);

  // Circle
  circle
    .attr('cx', xScale(0))
    .attr('cy', yScale(0))
    .attr('r', xScale(1) - xScale(0));

  // Dot
  dot
    .attr('cx', xScale(0))
    .attr('r', 4)
    .style('fill', '#fff');

  // Triangle
  c
    .attr(X1, xScale(0))
    .attr(Y1, yScale(0));

  function draw() {

    var
      x = xScale(Math.cos(time)),
      y = yScale(-Math.sin(time));

    path
      .attr('d', sine(data));

    label
      .text('t = '+ Math.floor(time / Math.PI));

    c
      .attr(X2, x)
      .attr(Y2, y);

    b
      .attr(X1, xScale(0))
      .attr(Y1, y)
      .attr(X2, x)
      .attr(Y2, y);

    dot
      .attr('cy', y);

    time += .015;

    setTimeout(draw, 35);
  }
  draw();

})();