visualization template based on mouse input by zanarmstrong

index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Mousemove Input</title>
		<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
			<script type="text/javascript" src="datgui-min.js"></script>
			<link rel="stylesheet" href="animatedMouseMove.css">
			<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		</head>
		<body>
			<p>As you move your mouse, this stores the x,y coordinates of your mouse.</p>
			<section id="box" class="main">
			</section>
			<!-- call JS files -->
			<script src="animatedMouseMove.js"></script>
		</body>
	</html>

animatedMouseMove.css

body {
	background-color: #c8d1fa;
}

animatedMouseMove.js

"use strict";

// so that touchmove is not scrolling
document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false); 

// set up optional input variables
// these can be controlled from the UI
var InputOptions = function() {
  // a, color, and string are dummy variables that you can use
  // tailLength is the number of coordinates stored
  this.a = 12;
  this.tailLength = 40;
  this.color = '#ffffff';
  this.string = 'basis';
};

var options = new InputOptions();
var gui = new dat.GUI();
var controller = {
  a: gui.add(options, 'a', 0, 80)
		 		.onChange(function(value) {
					options.a = value;
				}),
	tailLength: gui.add(options, 'tailLength', 0 , 100)
			  .onChange(function(value) {
					options.tailLength = value
				}),
  color: gui.addColor(options, 'color')
   				  .onChange(function(value) {
  						options.color = value
						}),

	string: gui.add(options, 'string', [ 'basis', 'linear', 'step', 'bundle', 'cardinal', 'monotone'])
   				   .onChange(function(value) {
  							options.string = value;
							})
  };

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

// empty array to hold (x,y) pairs based on user's mousemovement
var points = [];

// STANDARD SVG SETUP for D3, with calls to update the Array of points on mouse or touch move
var svg = d3.select('body')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .on("mousemove", function() {
  	updateArray(d3.mouse(this));
  })
  .on("touchmove", function() {
  	updateArray(d3.mouse(this));
  });

// update line with new points
function logPoints() {
	// show points in console: you would do something here in your visualization
	console.log(points[0], points[5], points.length)

	// call repeatedly
	requestAnimationFrame(logPoints);
}

// show the points in the console
logPoints();

// update point array using the data in "coord" which is the coordinates from the latest mouse location
function updateArray(coord) {

  // if the array is shorter than the desired length, just add the new coordinates at the end of the array
	if(points.length < options.tailLength - 1){
		points.push({
			x: coord[0],
			y: coord[1]
		});
	} else {
		// add the new points to the array, and remove the old ones
		points.push(points[0]);
		points[points.length - 1].x = coord[0];
		points[points.length - 1].y = coord[1];
		points.shift()
	}
};