anjiro/basic_vis.html

## basic_vis.html
<html>
	<head>
		<meta charset="utf-8">
		<script src="node_modules/jquery/dist/jquery.min.js"></script>
		<script src="paperjs-v0.9.23/dist/paper-full.js"></script>
		<script type="text/paperscript" canvas="paper">
			var $ = window.$;

			//Fill in the background
			var background = new Shape.Rectangle(view.bounds);
			background.fillColor = "Red";

			//Set up my initial path to draw
			var path = new Path();
			path.strokeColor = "black";

			var public_key = 'YGV3jNvQMjh2G4oOLwdx';
			function drawData()
			{
				$.ajax({
					url: 'https://data.sparkfun.com/output/' + public_key + '.json',
					data: {page: 1},
					dataType: 'jsonp',
				}).done(
					function(results)
					{
						console.log("Got " + results.length + " results");
						var incx = view.bounds.width / results.length;
						//Start at the middle left of the rectangle
						var loc = view.bounds.leftCenter - incx;
						path.remove();
						path = new Path();
						path.strokeColor = "black";
						path.moveTo(loc);
						for(var i = 0; i < results.length; i++)
						{
							  row = results[i];
								loc = new Point(loc.x + incx,
											(parseFloat(row.my) - 95) * 80 + view.bounds.height/2 + 100);
								path.lineTo(loc);
						}
						/*
						$.each(results,
							function(index, row)
							{
								loc = new Point(loc.x + incx,
											(parseFloat(row.my) - 95) * 80 + view.bounds.height/2 + 100);
								path.lineTo(loc);
							}
						);
						*/
						view.draw();
						window.setTimeout(drawData, 30000);
					}
				);
			}

			drawData();

		</script>
	</head>
	<body>
		<canvas id="paper" width="500px" height="200px" resize></canvas>
	</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="node_modules/jquery/dist/jquery.min.js"></script>
	<script src="paperjs-v0.9.23/dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="paper">
	var $ = window.$;

	//Fill in the background
	var background = new Shape.Rectangle(view.bounds);
	background.fillColor = "Red";

	//Set up my initial path to draw
	var path = new Path();
	path.strokeColor = "black";

	var public_key = 'YGV3jNvQMjh2G4oOLwdx';
	function drawData()
	{
	$.ajax({
	url: 'https://data.sparkfun.com/output/' + public_key + '.json',
	data: {page: 1},
	dataType: 'jsonp',
	}).done(
	function(results)
	{
	console.log("Got " + results.length + " results");
	var incx = view.bounds.width / results.length;
	//Start at the middle left of the rectangle
	var loc = view.bounds.leftCenter - incx;
	path.remove();
	path = new Path();
	path.strokeColor = "black";
	path.moveTo(loc);
	for(var i = 0; i < results.length; i++)
	{
	row = results[i];
	loc = new Point(loc.x + incx,
	(parseFloat(row.my) - 95) * 80 + view.bounds.height/2 + 100);
	path.lineTo(loc);
	}
	/*
	$.each(results,
	function(index, row)
	{
	loc = new Point(loc.x + incx,
	(parseFloat(row.my) - 95) * 80 + view.bounds.height/2 + 100);
	path.lineTo(loc);
	}
	);
	*/
	view.draw();
	window.setTimeout(drawData, 30000);
	}
	);
	}

	drawData();

	</script>
	</head>
	<body>
	<canvas id="paper" width="500px" height="200px" resize></canvas>
	</body>
	</html>