pjryan126
2/17/2016 - 4:47 AM
data.js
[
{
"GPX File": "2014-11-16-1832.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "48.61",
"Duration": "38:37",
"Average Pace": "9:29",
"Distance (mi)": "4.07",
"Calories Burned": "597.487181380841",
"Date": "2014-11-16 18:32:41",
"Type": "Running",
"Average Speed (mph)": "6.32"
},
{
"GPX File": "2014-11-05-2203.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "51.36",
"Duration": "35:14",
"Average Pace": "9:59",
"Distance (mi)": "3.53",
"Calories Burned": "517.931267229648",
"Date": "2014-11-05 22:03:00",
"Type": "Running",
"Average Speed (mph)": "6.01"
},
{
"GPX File": "2014-10-26-0938.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "42.91",
"Duration": "29:45",
"Average Pace": "8:52",
"Distance (mi)": "3.35",
"Calories Burned": "485.967507370358",
"Date": "2014-10-26 09:38:45",
"Type": "Running",
"Average Speed (mph)": "6.76"
},
{
"GPX File": "2014-10-18-1718.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "42.74",
"Duration": "14:30",
"Average Pace": "11:04",
"Distance (mi)": "1.31",
"Calories Burned": "189.96253883919",
"Date": "2014-10-18 17:18:28",
"Type": "Running",
"Average Speed (mph)": "5.42"
},
{
"GPX File": "2014-10-14-2320.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "45.44",
"Duration": "33:08",
"Average Pace": "9:25",
"Distance (mi)": "3.52",
"Calories Burned": "508.57342818183",
"Date": "2014-10-14 23:20:23",
"Type": "Running",
"Average Speed (mph)": "6.37"
},
{
"GPX File": "2014-10-07-0618.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "16.30",
"Duration": "19:19",
"Average Pace": "9:39",
"Distance (mi)": "2.00",
"Calories Burned": "279.401431052916",
"Date": "2014-10-07 06:18:50",
"Type": "Running",
"Average Speed (mph)": "6.22"
},
{
"GPX File": "2014-09-28-2053.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "35.73",
"Duration": "34:47",
"Average Pace": "8:39",
"Distance (mi)": "4.02",
"Calories Burned": "579.0",
"Date": "2014-09-28 20:53:21",
"Type": "Running",
"Average Speed (mph)": "6.94"
},
{
"GPX File": "2014-09-22-2225.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "35.80",
"Duration": "38:33",
"Average Pace": "9:37",
"Distance (mi)": "4.01",
"Calories Burned": "576.0",
"Date": "2014-09-22 22:25:59",
"Type": "Running",
"Average Speed (mph)": "6.24"
},
{
"GPX File": "2014-09-20-0639.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "62.73",
"Duration": "36:43",
"Average Pace": "9:09",
"Distance (mi)": "4.02",
"Calories Burned": "586.0",
"Date": "2014-09-20 06:39:21",
"Type": "Running",
"Average Speed (mph)": "6.56"
},
{
"GPX File": "2014-09-18-0625.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "50.83",
"Duration": "38:31",
"Average Pace": "9:34",
"Distance (mi)": "4.02",
"Calories Burned": "586.0",
"Date": "2014-09-18 06:25:14",
"Type": "Running",
"Average Speed (mph)": "6.27"
},
{
"GPX File": "2014-09-16-0614.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "50.56",
"Duration": "36:28",
"Average Pace": "9:06",
"Distance (mi)": "4.01",
"Calories Burned": "582.0",
"Date": "2014-09-16 06:14:54",
"Type": "Running",
"Average Speed (mph)": "6.59"
},
{
"GPX File": "2014-09-13-0625.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "37.36",
"Duration": "39:40",
"Average Pace": "9:53",
"Distance (mi)": "4.01",
"Calories Burned": "580.0",
"Date": "2014-09-13 06:25:36",
"Type": "Running",
"Average Speed (mph)": "6.07"
},
{
"GPX File": "2014-09-10-0614.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "34.09",
"Duration": "39:02",
"Average Pace": "9:38",
"Distance (mi)": "4.05",
"Calories Burned": "584.0",
"Date": "2014-09-10 06:14:29",
"Type": "Running",
"Average Speed (mph)": "6.23"
},
{
"GPX File": "2014-09-08-0621.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "45.70",
"Duration": "34:10",
"Average Pace": "8:31",
"Distance (mi)": "4.01",
"Calories Burned": "580.0",
"Date": "2014-09-08 06:21:25",
"Type": "Running",
"Average Speed (mph)": "7.04"
},
{
"GPX File": "2014-09-06-0621.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "16.76",
"Duration": "19:32",
"Average Pace": "9:17",
"Distance (mi)": "2.11",
"Calories Burned": "302.0",
"Date": "2014-09-06 06:21:02",
"Type": "Running",
"Average Speed (mph)": "6.47"
},
{
"GPX File": "2014-09-05-0613.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "47.29",
"Duration": "35:58",
"Average Pace": "8:58",
"Distance (mi)": "4.01",
"Calories Burned": "581.0",
"Date": "2014-09-05 06:13:42",
"Type": "Running",
"Average Speed (mph)": "6.69"
},
{
"GPX File": "2014-09-03-0604.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "61.74",
"Duration": "51:55",
"Average Pace": "9:32",
"Distance (mi)": "5.44",
"Calories Burned": "787.0",
"Date": "2014-09-03 06:04:46",
"Type": "Running",
"Average Speed (mph)": "6.29"
},
{
"GPX File": "2014-09-01-0623.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "45.16",
"Duration": "48:23",
"Average Pace": "10:16",
"Distance (mi)": "4.71",
"Calories Burned": "680.0",
"Date": "2014-09-01 06:23:11",
"Type": "Running",
"Average Speed (mph)": "5.84"
},
{
"GPX File": "2014-08-30-0607.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "70.20",
"Duration": "1:24:34",
"Average Pace": "10:34",
"Distance (mi)": "8.00",
"Calories Burned": "1159.0",
"Date": "2014-08-30 06:07:57",
"Type": "Running",
"Average Speed (mph)": "5.68"
},
{
"GPX File": "2014-08-29-0609.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "47.29",
"Duration": "36:56",
"Average Pace": "9:10",
"Distance (mi)": "4.03",
"Calories Burned": "582.0",
"Date": "2014-08-29 06:09:25",
"Type": "Running",
"Average Speed (mph)": "6.55"
},
{
"GPX File": "2014-08-27-0610.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "51.64",
"Duration": "37:44",
"Average Pace": "9:24",
"Distance (mi)": "4.01",
"Calories Burned": "581.0",
"Date": "2014-08-27 06:10:03",
"Type": "Running",
"Average Speed (mph)": "6.38"
},
{
"GPX File": "2014-08-26-0609.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "Workout 1 easy pace",
"Climb (ft)": "40.84",
"Duration": "41:43",
"Average Pace": "10:26",
"Distance (mi)": "4.00",
"Calories Burned": "572.0",
"Date": "2014-08-26 06:09:31",
"Type": "Running",
"Average Speed (mph)": "5.75"
},
{
"GPX File": "2014-08-23-1051.gpx",
"Average Heart Rate (bpm)": "",
"Route Name": "",
"Notes": "",
"Climb (ft)": "40.47",
"Duration": "32:26",
"Average Pace": "9:16",
"Distance (mi)": "3.50",
"Calories Burned": "510.0",
"Date": "2014-08-23 10:51:43",
"Type": "Running",
"Average Speed (mph)": "6.48"
}
]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// Select Fields.
var xField = 'Duration',
yField = 'Calories Burned';
// Set margins.
var margin = { top: 50, right: 100, bottom: 30, left: 150 },
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// Get max of attribute
var getMax = function(data, attr) {
return d3.max(data, function(d) {
return d[attr]
});
}
// Parse time value.
var parseTime = function(t) {
t = t.split(":");
var hr = 0,
min = 0,
sec = 0;
if (t.length === 3) {
hr = t[0];
min = t[1];
sec = t[2];
}
else {
min = t[0];
sec = t[1];
}
min = +min;
sec = +sec;
res = hr*60 + min + sec/60;
return Math.round(res * 100)/100
}
// Add the graph canvas to the body of the webpage.
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 + ")");
// Add the tooltip area to the webpage.
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Load data
d3.json('data.js', function(error, data) {
data.forEach(function(d) {
// Convert string values to number values.
d[xField] = parseTime(d[xField]);
d[yField] = +d[yField];
});
// Set up x values and placement.
var xValue = function(d) { return d[xField]; },
xScale = d3.scale.linear().domain([0, getMax(data, xField) + 10]).range([0, width]),
xMap = function(d) { return xScale(xValue(d));},
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// Set up y values and placement.
var yValue = function(d) { return d[yField]; },
yScale = d3.scale.linear().domain([0, getMax(data, yField) + 10]).range([height, 0]),
yMap = function(d) { return yScale(yValue(d));},
yAxis = d3.svg.axis().scale(yScale).orient("left");
// Add title.
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "bold")
.text("Duration of Exercise vs Calories Burned");
// Draw x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width/2 + 65)
.attr("y", 30)
.style("text-anchor", "end")
.text("Duration (Minutes)");
// Draw y-axis.
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("x", -40)
.attr("y", height/2)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(yField);
// draw dots
svg.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "#474747")
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d["Date"] + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
});
</script>
</body>
</html>