cameron/add.html

## add.html
<html>
<body>
  <select class="startTemp">
  </select>
  <select class="endTemp">
  </select>
  <input type="submit" class="add" value="Add">
  <a href='index.html'>Graph</a>
  <script src="add.js"></script>
</body>
</html>

## add.js

var measurements = JSON.parse(window.localStorage['measurements'] || "[]");
function save(){
  window.localStorage['measurements'] = JSON.stringify(measurements);
}

var start = document.querySelector('.startTemp');
var end = document.querySelector('.endTemp');
var options = '';
for(var i = 98; i > 65; i--){
  options += '<option>' + i + '</option>';
}
start.innerHTML = end.innerHTML = options;
document.querySelector('.add').addEventListener('click', function(){
  measurements.push({
    startTemp: Number(start.value),
    endTemp: Number(end.value),
    timestamp: new Date().getTime(),
  });
  save();
  document.location = 'index.html';
});

## data.json
[{
  "timestamp": 1397872800278,
  "startTemp": 70,
  "endTemp": 87,
  "notes": "friday of 2nd meeting w/the dr, awesome convo @ mangolia with eric: just as the way of mindfulness is not to dismiss distraction, but to allow it and then return to the intention, the way of changing the world is not to confront our governments and organizations head on, but to distribute practices that change the individuals who compose them) "
},{
  "timestamp": 1398309524978,
  "startTemp": 86,
  "endTemp": 92,
  "notes": "after 3rd session with george"
},{
  "timestamp": 1398269924978,
  "startTemp": 74,
  "endTemp": 75,
  "notes": "cold room"
},{
  "timestamp": 1398381440831,
  "startTemp": 90,
  "endTemp": 95,
  "notes": "post stressful lecture (standing for an hour), exceedingly tired"
},{
  "timestamp": 1398386887255,
  "startTemp": 81,
  "endTemp": 91,
  "notes": "sitting at desk for a few hours, had  few meetings"
},{
  "timestamp": 1398397609998,
  "startTemp": 88,
  "endTemp": 95,
  "notes": "after dinner, full and quite sleepy"
}]

## graph.js

if(!window.localStorage['measurements']){
  window.localStorage['measurements'] = "[]";
}

var measurements = JSON.parse(window.localStorage['measurements'])
    .map(function(m){
      m.date = new Date(m.timestamp);
      return m;
    });

var margin = {top: 10, right: 40, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var lowTemp = 65;
var hiTemp = 98;
var targetTemp = 96;


var dayMs = 1000*60*60*24;
var dateRange = d3.extent(measurements, function(d){ return d.date });

dateRange[0] = new Date(dateRange[0].getTime() - dayMs);
dateRange[1] = new Date(dateRange[1].getTime() + dayMs);

var x = d3.time.scale()
    .domain(dateRange)
    .range([0, width]);

var y = d3.scale.linear()
.domain([lowTemp, hiTemp])
.range([height, lowTemp]);

var tsToDate = function(d){
  d = new Date(d);
  return (d.getMonth() + 1) + '/' + d.getDate();
}

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(6, 0);

var deg = function(s){ return s + "°"; }

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("right")
  .tickValues([70, 75, 80, 85, 90, 95])
  .tickFormat(deg)
  .tickSize(width);

var yAxisMod = function(g){
  g.selectAll('text')
  .attr('x', "-3em")
}

var progressColor = d3.scale.linear()
    .domain([0,1])
    .range(["blue", "red"]);

var hrAndMin = function(d){
  var amOrPm = d.getHours() > 12 ? 'pm' : 'am';
  return (d.getHours() % 12) + ':' + d.getMinutes() + amOrPm;
}

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<span class='notes'>" + deg(d.startTemp) + " - " + deg(d.endTemp) + " @ " + hrAndMin(d.date) + "</span>";
  })

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);


svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

svg.append("rect")
.attr("class", "target-temp")
.attr("transform", "translate(0," + (y(96) - 1) + ")")
.attr("width", width)
.attr("height", 1);

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.call(yAxisMod)

svg.selectAll(".bar")
.data(measurements)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.date); })
.attr("width", 10)
.attr("y", function(d) { return y(d.endTemp); })
.attr("height", function(d) { return y(d.startTemp) - y(d.endTemp); })
.style("fill", function(d){ return progressColor((d.endTemp - d.startTemp) / (96 - d.startTemp)) })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<a class='add-link' href="add.html">Add Session</a>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="graph.js"></script>
</body>
</html>

## style.css
body {
  font: 12px sans-serif;
  text-align: center;
}

.add-link:hover {
  color: white;
  background-color:#7ECBFF;
}

.add-link {
  position: absolute;
  font-size: 2em;
  padding: .6em 1.5em;
  color: #7ECBFF;
  text-decoration: none;
  border: 1px solid #7ECBFF;
  border-radius: 999px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.y.axis line {
  stroke-dasharray: 2,2;
}

.y.axis path {
  display: none;
}

.tick{
  fill: #777
}

.target-temp {
  fill: rgba(255,0,0,.2);
  shape-rendering: crispEdges;
}


.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
	<html>
	<body>
	<select class="startTemp">
	</select>
	<select class="endTemp">
	</select>
	<input type="submit" class="add" value="Add">
	<a href='index.html'>Graph</a>
	<script src="add.js"></script>
	</body>
	</html>

	var measurements = JSON.parse(window.localStorage['measurements'] \|\| "[]");
	function save(){
	window.localStorage['measurements'] = JSON.stringify(measurements);
	}

	var start = document.querySelector('.startTemp');
	var end = document.querySelector('.endTemp');
	var options = '';
	for(var i = 98; i > 65; i--){
	options += '<option>' + i + '</option>';
	}
	start.innerHTML = end.innerHTML = options;
	document.querySelector('.add').addEventListener('click', function(){
	measurements.push({
	startTemp: Number(start.value),
	endTemp: Number(end.value),
	timestamp: new Date().getTime(),
	});
	save();
	document.location = 'index.html';
	});
	[{
	"timestamp": 1397872800278,
	"startTemp": 70,
	"endTemp": 87,
	"notes": "friday of 2nd meeting w/the dr, awesome convo @ mangolia with eric: just as the way of mindfulness is not to dismiss distraction, but to allow it and then return to the intention, the way of changing the world is not to confront our governments and organizations head on, but to distribute practices that change the individuals who compose them) "
	},{
	"timestamp": 1398309524978,
	"startTemp": 86,
	"endTemp": 92,
	"notes": "after 3rd session with george"
	},{
	"timestamp": 1398269924978,
	"startTemp": 74,
	"endTemp": 75,
	"notes": "cold room"
	},{
	"timestamp": 1398381440831,
	"startTemp": 90,
	"endTemp": 95,
	"notes": "post stressful lecture (standing for an hour), exceedingly tired"
	},{
	"timestamp": 1398386887255,
	"startTemp": 81,
	"endTemp": 91,
	"notes": "sitting at desk for a few hours, had few meetings"
	},{
	"timestamp": 1398397609998,
	"startTemp": 88,
	"endTemp": 95,
	"notes": "after dinner, full and quite sleepy"
	}]

	if(!window.localStorage['measurements']){
	window.localStorage['measurements'] = "[]";
	}

	var measurements = JSON.parse(window.localStorage['measurements'])
	.map(function(m){
	m.date = new Date(m.timestamp);
	return m;
	});

	var margin = {top: 10, right: 40, bottom: 20, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var lowTemp = 65;
	var hiTemp = 98;
	var targetTemp = 96;


	var dayMs = 10006060*24;
	var dateRange = d3.extent(measurements, function(d){ return d.date });

	dateRange[0] = new Date(dateRange[0].getTime() - dayMs);
	dateRange[1] = new Date(dateRange[1].getTime() + dayMs);

	var x = d3.time.scale()
	.domain(dateRange)
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([lowTemp, hiTemp])
	.range([height, lowTemp]);

	var tsToDate = function(d){
	d = new Date(d);
	return (d.getMonth() + 1) + '/' + d.getDate();
	}

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickSize(6, 0);

	var deg = function(s){ return s + "°"; }

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("right")
	.tickValues([70, 75, 80, 85, 90, 95])
	.tickFormat(deg)
	.tickSize(width);

	var yAxisMod = function(g){
	g.selectAll('text')
	.attr('x', "-3em")
	}

	var progressColor = d3.scale.linear()
	.domain([0,1])
	.range(["blue", "red"]);

	var hrAndMin = function(d){
	var amOrPm = d.getHours() > 12 ? 'pm' : 'am';
	return (d.getHours() % 12) + ':' + d.getMinutes() + amOrPm;
	}

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	return "<span class='notes'>" + deg(d.startTemp) + " - " + deg(d.endTemp) + " @ " + hrAndMin(d.date) + "</span>";
	})

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.call(tip);


	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("rect")
	.attr("class", "target-temp")
	.attr("transform", "translate(0," + (y(96) - 1) + ")")
	.attr("width", width)
	.attr("height", 1);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.call(yAxisMod)

	svg.selectAll(".bar")
	.data(measurements)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.date); })
	.attr("width", 10)
	.attr("y", function(d) { return y(d.endTemp); })
	.attr("height", function(d) { return y(d.startTemp) - y(d.endTemp); })
	.style("fill", function(d){ return progressColor((d.endTemp - d.startTemp) / (96 - d.startTemp)) })
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<body>
	<a class='add-link' href="add.html">Add Session</a>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="graph.js"></script>
	</body>
	</html>
	body {
	font: 12px sans-serif;
	text-align: center;
	}

	.add-link:hover {
	color: white;
	background-color:#7ECBFF;
	}

	.add-link {
	position: absolute;
	font-size: 2em;
	padding: .6em 1.5em;
	color: #7ECBFF;
	text-decoration: none;
	border: 1px solid #7ECBFF;
	border-radius: 999px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.y.axis line {
	stroke-dasharray: 2,2;
	}

	.y.axis path {
	display: none;
	}

	.tick{
	fill: #777
	}

	.target-temp {
	fill: rgba(255,0,0,.2);
	shape-rendering: crispEdges;
	}


	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}