jittery line (original) by zanarmstrong

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Jitter Line</title>
    <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="animatedMouseMove.css">
      <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>
    <body>
      <p>Use your mouse to sketch a (jittery) line.</p>
      <section id="box" class="main">
      </section>
      <!-- call JS files -->
      <script src="animatedMouseMove.js"></script>
    </body>
  </html>

animatedMouseMove.css

body {
	background-color: #323232;
}

p {
	color: white;
	font-family: 'Raleway', sans-serif;
}

.mainPath {
	stroke: white;
	stroke-width: 3;
	fill: none;
}

animatedMouseMove.js

"use strict";

// standard parameters
var margin = {
		top: 20,
		right: 0,
		bottom: 0,
		left: 0
	},
	width = 1400 - margin.left - margin.right,
	height = 500 - margin.bottom - margin.top;

// new parameters
var points = [];
var jitter = 12;

// define the function for the line with jitter
var lineFunction = d3.svg.line()
	.x(function(d) {
		return d.x + Math.random() * jitter - jitter/2 - margin.left;
		console.log('x here')
	})
	.y(function(d) {
		return d.y + Math.random() * jitter - jitter/2 - margin.top;
	})
	.interpolate('basis');

// standard svg intro + mousemove
var svg = d3.select(".main").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.on("mousemove", function() {
		tick(d3.mouse(this));
	});

// update line with new points
function update() {
	svg.selectAll("path").remove();

	svg.append('path')
		.attr("d", lineFunction(points))
		.attr("class", "mainPath");
}

// update point array
function tick(coord) {

	points.push({
		x: coord[0],
		y: coord[1]
	});

	if (points.length > 40) {
		points.shift()
	}

	update()

};