
    context.fillStyle = "rgba(255,0,0,0.3)";

    var x = 0,
        y = 0,
        penState = 0;

    coordinates.forEach(function(c) {
      var dx = c[0],
          dy = c[1];

      context.beginPath();
      context.moveTo(xScale(x), yScale(y));
      if (!penState) context.lineTo(xScale(x + dx), yScale(y + dy));
      context.stroke();
      context.fillRect(xScale(x) - 2, yScale(y) - 2, 4, 4);

      penState = c[2];
      x += dx;
      y += dy;
    });
  }


  //
  // Model functions
  //

  var m