-
-
Save cameron/11241064 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{ | |
| "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" | |
| }] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment