Toph Tucker tophtucker

USER TESTING: John

Too much going on when page loads!!!
He loaded it lying down on his back; either do gyro relative to initial position or communicate the neutral position better
Doesn't get the 'record' metaphor; feels more like a play/stop situation
Text wrapping confuses the linear tape recording metaphor
Can't tell if toggles are on or off
Wants toggles to be hooked up 'live' to visualize the relevant gyro axis
Confusing to have three gyro and one accelerometer button
Text should scroll with cursor

	function multiLineChart() {
	var margin = {top: 20, right: 20, bottom: 20, left: 20},
	width = 760,
	height = 120,
	xValue = function(d) { return d[0]; },
	yValue = function(d) { return d[1]; },
	zValue = function(d) { return d; },
	xScale = d3.scaleTime(),
	yScale = d3.scaleLinear(),
	xAxis = d3.axisBottom().scale(xScale).tickSize(6, 0),

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Batterymap</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;

	// https://d3js.org Version 4.0.0. Copyright 2016 Mike Bostock.
	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.d3 = global.d3 \|\| {})));
	}(this, function (exports) { 'use strict';

	var version = "4.0.0";

	function ascending(a, b) {

	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>

	* {
	box-sizing: border-box;
	}