Skip to content

Instantly share code, notes, and snippets.

@oikonang

oikonang/README.md

Last active July 3, 2017 07:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oikonang/acada278346a3df9da1b870be181f55a to your computer and use it in GitHub Desktop.
Save oikonang/acada278346a3df9da1b870be181f55a to your computer and use it in GitHub Desktop.
Download ZIP
Linked line graphs with barplot and Leaflet Map with D3v4
Raw
README.md

Interactive bike - route Visualization

This is a multiplot created for the scope to visualize metrics data after the end of the trip described here.

  • Hover over a bar to see data for each day of biking
  • On mouse-move on the linked - lines, check y-metrics with fixed x-axis
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="interactive_map.css"> <!-- This is the css for the interactive map -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="interactive_map.js"></script> <!-- This is the js for the interactive map -->
</head>
<body>
<div id='map'></div>
<svg id='bar'></svg>
<!-- <svg id='elev'></svg> -->
<div id='graphs'></div>
<script>
// load interactive map data
document.addEventListener('DOMContentLoaded', function() {
d3.json("tmp_trim.json", draw);
});
</script>
</body>
</html>
Raw
interactive_map.css
body {
height: 600px;
width: 1200px;
background-color: #eeeeee;
}
#map {
width:50%;
height:100%;
float: right;
}
#bar {
width: 50%;
height: 150px;
float: left;
}
/* New Staff*/
#graphs {
width: 50%;
height: 450px;
float: left;
}
.area {
//fill: #e7e7e7;
fill: transparent;
}
.overlay {
fill: none;
pointer-events: all;
}
.focusLine {
stroke: blue;
stroke-dasharray: 3, 3;
opacity: 0.5;
}
/* New Staff END*/
.line {
stroke-width: 2;
fill: none;
stroke: #47885e;
}
.bar {
fill: #999999; /*green #47885e*/
}
.bartext{
font: 10px sans-serif;
}
.active {
fill: #47885e;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path.leaflet-clickable {
stroke-opacity: 1;
stroke-width: 2px;
}
/*.textcircle {
fill: none;
stroke: steelblue;
}*/
Raw
interactive_map.js
///////////////////////////// This is the barchart with ttl distances ///////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
function draw_distances(data) {
var margin = {top: 20, right: 20, bottom: 20, left: 40},
width = 600 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var yTextPadding = 12; // For the bar tip on top
var x = d3.scaleBand()
.domain(data.map(function(d,i) { return i; }))
.rangeRound([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.ttl_dist; })])
.range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x)
.tickFormat(function(d) {return data[d].day_no;});
var yAxis = d3.axisLeft()
.scale(y)
.ticks(5);
var svg = d3.select("#bar")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top*2 + ")");
// The x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// The x-axis title
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+ (width/2) +","+(height+(margin.bottom*2))+")") // centre below axis
.text("Day");
// The y-axis title
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+ (-margin.left/2) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
.text("Distance in km");
// The bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d, ix) { return x(ix); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.ttl_dist); })
.attr("height", function(d) { return height - y(d.ttl_dist); })
// The tips on top of bars
svg.selectAll(".bartext")
.data(data)
.enter().append("text")
.attr("class", "bartext")
.attr("text-anchor", "middle")
.attr("font", "10px sans-serif")
.attr("fill", "#fef6cd")
.attr("x", function(d,ix) { return x(ix)+x.bandwidth()/2; })
.attr("y", function(d) { return y(d.ttl_dist)+yTextPadding; })
.text(function(d){ return d.ttl_dist+" km"; });
//Setting onMouseOver event handler for bars
svg.selectAll(".bar").on("mouseover", function(d){
$(".active").removeClass("active");
$(this).addClass("active");
draw_graphs(d);
draw_map_route(d);
});
}
////////////////////////////////// This is the elevation linegraph ///////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
function draw_graphs(day_data) {
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;
// Define format of the text value on top of the moving circle
var formatValue = d3.format(",.1f");
// Define format for time
var parseTime = d3.timeParse("%I:%M:%S");
// Create a bisect to handle the position of the mouse in relation with the data on mousemove
var bisect = d3.bisector(function(d){ return d.distance; }).left; // NEW STAFF
// variable to hold our yscales
var yarray = ['elevation','speed','heartrate'];
// Intitialize new nested dataset
var new_data_nest = [];
// Create the nested dataset
for ( var ix=0; ix<3; ix++) {
// Create helper array to build the nested dataset
var tmp = [];
for ( var i=0; i<day_data['elevation'].length; i++) {
tmp.push(
{distance : day_data['distance'][i],
time : day_data['time_form'][i],
value : day_data[yarray[ix]][i],
lat : day_data['path'][i][0],
long : day_data['path'][i][1],
symbol : yarray[ix]
});
}
new_data_nest.push({
key : yarray[ix],
values:tmp
});
}
// Add the SI symbol in the nested datasetfor each metric
for ( var ix=0; ix<3; ix++) {
if (new_data_nest[ix].key=='elevation'){
for ( var i=0; i<new_data_nest[0].values.length; i++) {
new_data_nest[ix].values[i]['si'] = 'm'
}
}
else if (new_data_nest[ix].key=='speed'){
for ( var i=0; i<new_data_nest[0].values.length; i++) {
new_data_nest[ix].values[i]['si'] = 'km/h'
}
}
else if (new_data_nest[ix].key=='heartrate'){
for ( var i=0; i<new_data_nest[0].values.length; i++) {
new_data_nest[ix].values[i]['si'] = 'bpm'
}
}
}
//console.log(parseTime(new_data_nest[0].values[0]['time']));
// disctionary to hold our yscales
var ys = {};
// Remove previous elevation graph if loaded
d3.select("#graphs").selectAll('*').remove();
// Initialize the main are to put all graphs in
var area = d3.area()
.x(function(d) { return xScale(d.distance);})
.y0(height)
.y1(function(d,i) {
return ys[d.symbol](d.value); //<-- call the y function matched to our symbol
//ys[yarray[i]](d.yarray);
});
// Initialize the line for each graph
var line = d3.line()
.x(function(d) { return xScale(d.distance); })
.y(function(d,i) {
return ys[d.symbol](d.value); //<-- call the y scale function matched to our symbol
//ys[d.symbol](d.price);
});
// Build the x scale
var xScale = d3.scaleLinear()
.rangeRound([0, width]);
// Build the x axis
var xAxis = d3.axisBottom()
.scale(xScale)
.tickFormat(d3.format(".1s"));
// Compute the maximum y-value per graph, needed for the y-domain.
new_data_nest.forEach(function(s) {
// Find the max value
var maxValue = d3.max(s.values, function(d) { return d.value; });
// Append the yscale of each line in the ys
ys[s.key] = d3.scaleLinear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
.range([height, 0])
.domain([0, maxValue]);
});
// Compute the minimum and maximum distance across y-elements.
// We assume values are sorted
xScale.domain([
d3.min(new_data_nest, function(s) {
return s.values[0].distance;
}),
d3.max(new_data_nest, function(s) {
return s.values[s.values.length - 1].distance;
})
]);
// Add an SVG element for each symbol, with the desired dimensions and margin.
var svg1 = d3.select("#graphs").selectAll("svg")
.data(new_data_nest)
.enter().append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// Create the rect for the mouse to be tracked
svg1.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("id", "clip-rect")
.attr("x", "-40")
.attr("y", "-10")
.attr("width", width + margin.left + margin.right)
.attr("height", height +margin.top-10);
// Add all svg1 in the main svg
var svg = svg1.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", area);
// Add the line path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
});
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", area);
// Title for the y-axis
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+ (-margin.left/1.6) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
.text(function(d) {
return capitalizeFirstLetter(d.key);
});
// The x-axis
svg.append('g') // create a <g> element
.attr('class', 'x axis') // specify classes
.attr("transform", "translate(0," + height + ")")
.call(xAxis); // let the axis do its thing
// build 4 y axis
var axisGs = svg.append("g"); //<-- create a collection of axisGs
// Build the structure
axisGs.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function(d) {
return d.values[d.values.length - 1].value;
});
// For each axisG create an axis with it's scale
axisGs.each(function(d, i) {
var self = d3.select(this);
self.call(
d3.axisLeft()
.scale(ys[d.key])
.ticks(4)
);
});
// Place each graph one after the other
svg = svg.append("g").attr("clip-path", "url(#clip)");
// Create a class for the mouse-move event
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
// Add the circle
focus.append("circle")
.style("stroke", "#47885e")
.style("fill", "#fef6cd")
.style("stroke-width", "1.5px")
.attr("r", 4.5);
// Add text on top of moving circle
focus.append("text")
.attr("x", 0)
.attr("dy", "-.90em")
.style("font-size", "12px")
.style("fill", "grey")
.style("text-anchor", "middle");
// Create the area where the mouse will be tracked
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
// .on("mouseout", function() {
// focus.style("display", "none");
// })
.on("mousemove", mousemove);
// append the vertical line for each
focus.append("line")
.attr('id', 'focusLineX')
.attr("class", "focusLine");
function mousemove() {
var xnew, posit, coordinates;
coordinates = d3.mouse(this);
xnew = xScale.invert( coordinates[0] );
// Select focus class of all linegraphs
var focus = svg.selectAll(".focus");
/////////////////////////////////////////////////////////// Create the moving marker on map
// Select map
map = window.map;
// Remove previous marker on move
$(".marker").remove();
// Create a new layer on map for the marker
var svg2 = d3.select("#map").select("svg"),
g2 = svg2.append("g").attr("class", "marker");
// Find the position of the array according to mouse move
posit1 = bisect(new_data_nest[0].values, xnew, 0, new_data_nest[0].values.length);
var tmplat = new_data_nest[0].values[posit1]['lat']
var tmplon = new_data_nest[0].values[posit1]['long']
LatLng = new L.LatLng(tmplat,tmplon);
// Sava coords into a variable object
var coords2 = [{tmplat,tmplon,LatLng}]
// This is the market point
var feature = g2.selectAll("path")
.data(coords2)
.enter().append("circle")
.style("stroke", "#47885e")
.style("fill", "#fef6cd")
.style("stroke-width", "1.5px")
.attr("r", 4.5);
// Up until here it is correct
map.on("viewreset", update);
update();
// Create a function to handle the layers on zoum in and out
function update() {
feature.attr("transform",
function(d) {
return "translate("+
map.latLngToLayerPoint(d.LatLng).x +","+
map.latLngToLayerPoint(d.LatLng).y +")";
}
)
} // close update
//////////////////////////////////////// END Marker
// Start the transform - translate function
focus.attr("transform", function(d) {
// Define the position of the mouse
posit = bisect(d.values, xnew, 0, d.values.length);
//Define the limits of the y-vertical mouseover axis with yDomain
var yDomain = d3.extent(d.values, function(d) {
return d.value;
});
// Define the position of the y-vertical line
focus.select('#focusLineX')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", ys[d.key](yDomain[0]-height));
// Activate the text on top of the moving circle
focus.selectAll("text").text(function(d) {
return ("" + formatValue(d.values[posit].value) + "" + d.values[posit].si)
});
// adjust mouseover to use appropriate scale
return "translate(" + xScale(d.values[posit].distance) + "," + ys[d.key](d.values[posit].value) + ")"
}); // End transform - translate function
} // End mousemove
} // End draw elevation
function draw_base_map() {
// The center must be updated whenever I put a new coordinate on the map
var center = [55.6716,12.5714] //[53.01,25.73]->Eastern Europe, [37.77, -122.45]->California
// The token is for access to the mapbox API
var accessToken = 'pk.eyJ1Ijoib2lrb25hbmciLCJhIjoiY2ozM2RjcjIyMDBjODJ3bzh3bnRyOHBxMyJ9.nQH16WG-DcBB_TQEEJiuCA';
// Default guidelines from Leaflet
var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/oikonang/cj33g56m9000k2roa18n92cr8/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoib2lrb25hbmciLCJhIjoiY2ozM2RjcjIyMDBjODJ3bzh3bnRyOHBxMyJ9.nQH16WG-DcBB_TQEEJiuCA', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>',
maxZoom: 18,
accessToken: accessToken
});
// Mapbox with leaflet
var map = L.map('map').addLayer(mapboxTiles).setView(center, 12);
// Initialize map
window.map = map
}
// Draw lan lot on map
function draw_map_route(day_data) {
map = window.map;
if (window.currentPath) {
map.removeLayer(window.currentPath);
};
latlng = day_data['path'];
var polyline = L.polyline(latlng, {color: 'red'}).addTo(map);
window.currentPath = polyline;
}
function draw(data) {
//data.reverse();
draw_distances(data);
draw_base_map();
}
// Function that capitalizes the first letter of a word
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
Raw
tmp_trim.json
[
{
"distance": [
2.2999999999999998,
87.700000000000003,
175.30000000000001,
242.59999999999999,
334.39999999999998,
419.80000000000001,
508.0,
611.89999999999998,
705.0,
788.39999999999998,
881.0,
970.10000000000002,
1056.0999999999999,
1154.2,
1240.4000000000001,
1321.0,
1391.7,
1481.7,
1567.2,
1671.0999999999999,
1758.7,
1790.7,
1862.0999999999999,
1967.7,
2058.6999999999998,
2155.5,
2256.0,
2365.0,
2451.0999999999999,
2545.6999999999998,
2641.0,
2727.9000000000001,
2813.1999999999998,
2908.1999999999998,
2993.0,
3086.5,
3179.6999999999998,
3263.9000000000001,
3350.0999999999999,
3435.0,
3525.1999999999998,
3606.1999999999998,
3702.0,
3805.8000000000002,
3899.1999999999998,
3991.3000000000002,
4092.0,
4187.5,
4295.6000000000004,
4379.8999999999996,
4466.8999999999996,
4561.6000000000004,
4644.5,
4732.6999999999998,
4822.6000000000004,
4928.3000000000002,
5000.6000000000004,
5105.1000000000004,
5189.0,
5273.1000000000004,
5366.6999999999998,
5463.6999999999998,
5549.8999999999996,
5624.5,
5670.1999999999998,
5761.6000000000004,
5849.0,
5934.6999999999998,
6023.6999999999998,
6113.0,
6220.1999999999998,
6301.0,
6385.6999999999998,
6468.8000000000002,
6557.3000000000002,
6656.6999999999998,
6741.6999999999998,
6843.6999999999998,
6935.1999999999998,
7022.0,
7134.8000000000002,
7233.0,
7309.5,
7399.8999999999996,
7433.3000000000002,
7497.1000000000004,
7589.1000000000004,
7684.6000000000004,
7755.3999999999996,
7835.3999999999996,
7940.1000000000004,
8023.8999999999996,
8130.5,
8200.6000000000004,
8258.7999999999993,
8332.7999999999993
],
"heartrate": [
113.0,
118.0,
123.0,
121.0,
123.0,
137.0,
126.0,
131.0,
139.0,
130.0,
132.0,
130.0,
131.0,
133.0,
127.0,
127.0,
124.0,
129.0,
129.0,
135.0,
146.0,
136.0,
123.0,
128.0,
131.0,
135.0,
134.0,
129.0,
148.0,
139.0,
135.0,
137.0,
137.0,
138.0,
138.0,
137.0,
144.0,
138.0,
139.0,
138.0,
132.0,
136.0,
134.0,
132.0,
141.0,
136.0,
139.0,
139.0,
134.0,
131.0,
131.0,
136.0,
131.0,
134.0,
136.0,
140.0,
137.0,
137.0,
136.0,
139.0,
138.0,
136.0,
139.0,
139.0,
127.0,
130.0,
135.0,
132.0,
140.0,
139.0,
138.0,
142.0,
138.0,
139.0,
139.0,
136.0,
137.0,
140.0,
137.0,
137.0,
139.0,
140.0,
139.0,
139.0,
137.0,
140.0,
137.0,
138.0,
137.0,
135.0,
132.0,
135.0,
135.0,
125.0,
120.0,
126.0
],
"elevation": [
6.4000000000000004,
4.2000000000000002,
-0.90000000000000002,
0.29999999999999999,
1.0,
4.0,
6.5,
15.800000000000001,
4.5,
4.0,
4.0,
2.0,
1.1000000000000001,
1.3999999999999999,
1.2,
2.0,
2.0,
1.0,
1.0,
1.0,
2.6000000000000001,
3.0,
2.3999999999999999,
1.0,
2.2000000000000002,
3.0,
2.7000000000000002,
2.0,
0.59999999999999998,
-0.69999999999999996,
0.40000000000000002,
2.0,
1.2,
1.0,
1.3,
1.8999999999999999,
2.6000000000000001,
5.5999999999999996,
4.7000000000000002,
5.9000000000000004,
5.4000000000000004,
4.5999999999999996,
3.7000000000000002,
3.6000000000000001,
4.5,
5.5,
6.2000000000000002,
6.9000000000000004,
4.2000000000000002,
3.7000000000000002,
3.7999999999999998,
4.0,
2.6000000000000001,
2.1000000000000001,
1.7,
1.8,
2.2000000000000002,
1.5,
5.0,
4.2000000000000002,
4.0,
3.0,
1.8999999999999999,
2.1000000000000001,
2.0,
2.7999999999999998,
3.5,
2.8999999999999999,
-1.1000000000000001,
1.3,
1.2,
1.1000000000000001,
-1.2,
1.5,
7.7000000000000002,
12.300000000000001,
4.7999999999999998,
2.0,
4.4000000000000004,
2.0,
4.7999999999999998,
4.0,
2.1000000000000001,
6.2000000000000002,
6.2000000000000002,
6.0,
-0.5,
1.1000000000000001,
1.5,
6.0,
4.2000000000000002,
4.2999999999999998,
3.0,
6.0,
6.0999999999999996,
4.5999999999999996
],
"elev_gain": 242.49999999999966,
"avg_speed": 9.6656774358386954,
"day_no": 6,
"avg_active_HR": 134.16184971098266,
"max_speed": 48.600000000000001,
"ttl_dist": 8.4000000000000004,
"path": [
[
55.674766000000005,
12.58836
],
[
55.674212,
12.587483
],
[
55.67360600000001,
12.586625999999999
],
[
55.673201,
12.585842
],
[
55.672686999999996,
12.584712
],
[
55.672208999999995,
12.583682000000001
],
[
55.67165,
12.58271
],
[
55.670939000000004,
12.581662
],
[
55.670292,
12.580729
],
[
55.669755,
12.580192
],
[
55.669312,
12.581405
],
[
55.668889,
12.582509
],
[
55.668464,
12.58347
],
[
55.668211,
12.584952000000001
],
[
55.668015000000004,
12.586269999999999
],
[
55.66781700000001,
12.587475
],
[
55.667281,
12.587249
],
[
55.666499,
12.58688
],
[
55.66588,
12.586115
],
[
55.665119,
12.585211
],
[
55.664347,
12.584978
],
[
55.664176,
12.584909
],
[
55.663557,
12.584748
],
[
55.66263299999999,
12.584387
],
[
55.661834,
12.584109
],
[
55.660990000000005,
12.583758
],
[
55.660109,
12.583431
],
[
55.659133,
12.583431
],
[
55.658434,
12.583825
],
[
55.657731999999996,
12.584635
],
[
55.657081000000005,
12.584794
],
[
55.656314,
12.584553
],
[
55.655561,
12.584321000000001
],
[
55.654731999999996,
12.584002
],
[
55.653983,
12.583776
],
[
55.653154,
12.583548
],
[
55.653123,
12.582155
],
[
55.653278,
12.580859
],
[
55.65274399999999,
12.579932000000001
],
[
55.65221999999999,
12.578969
],
[
55.651571,
12.578186
],
[
55.650992,
12.577442999999999
],
[
55.650181999999994,
12.576974
],
[
55.649443999999995,
12.575994999999999
],
[
55.648966,
12.574803
],
[
55.648813,
12.573582
],
[
55.649625,
12.573028
],
[
55.650344,
12.572274
],
[
55.65075600000001,
12.570772999999999
],
[
55.65148000000001,
12.570472
],
[
55.652221999999995,
12.570772
],
[
55.652892,
12.57141
],
[
55.652887,
12.570110000000001
],
[
55.653051,
12.568747
],
[
55.653587,
12.568282
],
[
55.654517000000006,
12.568566
],
[
55.655159,
12.568721
],
[
55.65609,
12.568878
],
[
55.65683000000001,
12.568927
],
[
55.657484,
12.569583
],
[
55.658151000000004,
12.570469000000001
],
[
55.658873,
12.571308
],
[
55.659478,
12.572166000000001
],
[
55.66,
12.572832
],
[
55.660219,
12.572337
],
[
55.660841000000005,
12.571489
],
[
55.66124,
12.570215
],
[
55.661768,
12.569192999999999
],
[
55.662452,
12.569879
],
[
55.663072,
12.570733
],
[
55.663851,
12.571713
],
[
55.664415000000005,
12.572505
],
[
55.664977,
12.5734
],
[
55.665583,
12.574164
],
[
55.666222999999995,
12.574922
],
[
55.666917000000005,
12.575844
],
[
55.667512,
12.576680999999999
],
[
55.668274,
12.577568
],
[
55.66890600000001,
12.578482000000001
],
[
55.669466,
12.579429
],
[
55.669895999999994,
12.58047
],
[
55.669582,
12.58165
],
[
55.669934,
12.582647999999999
],
[
55.670030000000004,
12.583828
],
[
55.670066000000006,
12.584062
],
[
55.670081,
12.584883999999999
],
[
55.669307999999994,
12.585165
],
[
55.66944599999999,
12.586403
],
[
55.669807999999996,
12.586677
],
[
55.670328000000005,
12.587515
],
[
55.670972,
12.58864
],
[
55.671517,
12.589518
],
[
55.672228000000004,
12.590614
],
[
55.672736,
12.59066
],
[
55.672975,
12.590197
],
[
55.673396,
12.590738
]
],
"speed": [
0.0,
7.0200000000000014,
8.6400000000000095,
7.9919999999999964,
9.2249999999999996,
9.0900000000000212,
9.5850000000000062,
11.571428571428573,
10.61999999999996,
7.2000000000000002,
10.49142857142856,
10.954285714285749,
10.259999999999877,
10.542857142857143,
10.491428571428619,
7.9200000000000284,
10.25999999999998,
10.645714285714309,
10.337142857142927,
10.337142857142812,
10.980000000000246,
0.99428571428570656,
12.119999999999891,
10.594285714285784,
9.9899999999999185,
10.542857142857143,
10.583999999999868,
11.571428571428573,
5.6399999999997821,
11.211428571428431,
9.0899999999999181,
11.26285714285719,
9.9899999999999185,
8.3599999999998555,
9.405000000000042,
9.9449999999999594,
8.9199999999998916,
9.5400000000001235,
9.0399999999999636,
9.0899999999999181,
9.0899999999999181,
9.7199999999998905,
10.594285714285668,
9.9000000000000004,
10.125,
9.8100000000000822,
10.90285714285705,
9.1999999999999993,
9.8100000000000822,
10.439999999999626,
10.169999999999755,
7.9920000000002611,
10.259999999999673,
9.9899999999999185,
11.057142857142859,
6.6436363636364231,
7.2000000000000002,
8.4400000000001469,
9.2799999999999265,
9.0,
13.859999999999673,
9.9449999999997551,
9.1799999999998363,
2.7000000000000002,
8.4799999999999276,
9.2800000000002925,
7.668000000000065,
9.9771428571426704,
12.41999999999989,
9.7200000000001641,
11.468571428571522,
10.491428571428385,
9.2699999999997544,
10.388571428571336,
11.622857142857331,
9.6750000000000007,
9.7199999999997555,
10.285714285714286,
9.0399999999997824,
10.440000000000094,
9.5400000000003278,
10.028571428571428,
9.1599999999998545,
11.005714285714099,
7.4880000000003939,
5.5800000000006547,
8.560000000000219,
8.5999999999999996,
8.0399999999997807,
10.697142857142484,
9.8100000000000822,
10.169999999999755,
10.035000000000082,
9.0450000000001634,
4.0199999999998903,
27.119999999998253
],
"day": "2017-04-11",
"time_form": [
"00:00:00",
"00:00:35",
"00:01:09",
"00:01:40",
"00:02:16",
"00:02:47",
"00:03:18",
"00:03:54",
"00:04:27",
"00:05:01",
"00:05:35",
"00:06:05",
"00:06:37",
"00:07:11",
"00:07:41",
"00:08:11",
"00:08:45",
"00:09:17",
"00:09:47",
"00:10:23",
"00:10:53",
"00:11:40",
"00:12:12",
"00:12:47",
"00:13:19",
"00:13:52",
"00:14:25",
"00:15:01",
"00:15:31",
"00:16:03",
"00:16:36",
"00:17:07",
"00:17:37",
"00:18:10",
"00:18:43",
"00:19:14",
"00:19:49",
"00:20:21",
"00:20:53",
"00:21:27",
"00:22:02",
"00:22:32",
"00:23:06",
"00:23:40",
"00:24:14",
"00:24:48",
"00:25:23",
"00:26:00",
"00:26:37",
"00:27:09",
"00:27:40",
"00:28:15",
"00:28:47",
"00:29:19",
"00:29:53",
"00:30:33",
"00:31:03",
"00:31:37",
"00:32:08",
"00:32:38",
"00:33:12",
"00:33:47",
"00:34:20",
"00:34:51",
"00:35:21",
"00:35:54",
"00:36:30",
"00:37:03",
"00:37:35",
"00:38:09",
"00:38:45",
"00:39:15",
"00:39:48",
"00:40:18",
"00:40:49",
"00:41:24",
"00:41:58",
"00:42:32",
"00:43:08",
"00:43:42",
"00:44:12",
"00:44:46",
"00:45:16",
"00:45:50",
"00:46:22",
"00:46:54",
"00:47:29",
"00:48:05",
"00:48:37",
"00:49:09",
"00:49:45",
"00:50:15",
"00:50:51",
"00:51:27",
"00:52:08",
"00:52:40"
]
},
{
"distance": [
6.7999999999999998,
317.69999999999999,
616.10000000000002,
939.79999999999995,
1244.5999999999999,
1548.8,
1764.2,
1942.9000000000001,
2190.9000000000001,
2426.5999999999999,
2624.0,
2805.5,
2958.9000000000001,
3116.0,
3143.4000000000001,
3153.0999999999999,
3288.5,
3538.8000000000002,
3794.8000000000002,
4025.0,
4265.5,
4549.1999999999998,
4688.6000000000004,
4957.3999999999996,
5177.3000000000002,
5395.5,
5612.5,
5750.1999999999998,
5932.8999999999996,
6087.1999999999998,
6359.6999999999998,
6691.0,
7088.0,
7341.6999999999998,
7573.5,
7800.1999999999998,
8025.6999999999998,
8202.0,
8384.1000000000004,
8619.2000000000007,
8773.7000000000007,
8965.1000000000004,
9219.2000000000007,
9469.0,
9605.3999999999996,
9758.0,
9819.2999999999993,
9819.2999999999993,
10020.099999999999,
10214.599999999999,
10433.4,
10626.799999999999,
10855.4,
11034.5,
11061.699999999999,
11289.4,
11585.799999999999,
11837.699999999999,
12104.0,
12361.0,
12678.199999999999,
13009.799999999999,
13331.599999999999,
13626.699999999999,
13887.699999999999,
14133.599999999999,
14400.099999999999,
14630.799999999999,
14778.5,
15004.0,
15233.099999999999,
15433.599999999999,
15658.9,
15888.699999999999,
16032.4,
16177.0,
16404.900000000001,
16659.900000000001,
16940.599999999999,
17020.099999999999,
17258.199999999997,
17532.900000000001,
17795.799999999999,
18077.5,
18351.900000000001,
18597.799999999999,
18793.900000000001,
18983.400000000001,
19220.099999999999,
19324.799999999999,
19555.799999999999,
19858.699999999997,
20066.0,
20277.900000000001,
20464.599999999999,
20616.599999999999,
20725.900000000001,
20783.699999999997,
21027.0
],
"heartrate": [
97.0,
91.0,
88.0,
100.0,
126.0,
117.0,
117.0,
120.0,
124.0,
130.0,
138.0,
126.0,
123.0,
125.0,
122.0,
105.0,
91.0,
113.0,
123.0,
145.0,
146.0,
139.0,
143.0,
140.0,
139.0,
147.0,
152.0,
141.0,
141.0,
141.0,
135.0,
138.0,
136.0,
135.0,
133.0,
118.0,
109.0,
120.0,
124.0,
126.0,
105.0,
135.0,
124.0,
130.0,
126.0,
132.0,
130.0,
96.0,
136.0,
131.0,
134.0,
132.0,
133.0,
127.0,
121.0,
129.0,
137.0,
123.0,
126.0,
123.0,
126.0,
125.0,
130.0,
131.0,
145.0,
151.0,
147.0,
142.0,
138.0,
148.0,
143.0,
141.0,
149.0,
151.0,
138.0,
129.0,
132.0,
120.0,
104.0,
110.0,
122.0,
122.0,
116.0,
120.0,
111.0,
115.0,
123.0,
127.0,
132.0,
120.0,
118.0,
109.0,
102.0,
96.0,
95.0,
116.0,
147.0,
138.0,
145.0
],
"elevation": [
340.80000000000001,
333.10000000000002,
321.30000000000001,
311.30000000000001,
310.30000000000001,
306.89999999999998,
301.80000000000001,
307.89999999999998,
316.60000000000002,
317.89999999999998,
316.0,
312.0,
317.0,
313.19999999999999,
313.0,
313.19999999999999,
314.69999999999999,
312.0,
315.0,
317.69999999999999,
314.39999999999998,
320.10000000000002,
318.69999999999999,
311.0,
318.0,
316.10000000000002,
315.0,
318.10000000000002,
325.39999999999998,
334.0,
314.80000000000001,
299.69999999999999,
268.80000000000001,
253.5,
251.0,
247.30000000000001,
240.0,
245.90000000000001,
241.69999999999999,
230.0,
227.30000000000001,
224.80000000000001,
222.30000000000001,
226.30000000000001,
227.80000000000001,
230.90000000000001,
231.30000000000001,
211.0,
208.19999999999999,
210.19999999999999,
213.0,
206.09999999999999,
207.69999999999999,
201.0,
201.0,
196.59999999999999,
190.0,
189.0,
182.09999999999999,
178.5,
175.30000000000001,
165.5,
167.09999999999999,
177.40000000000001,
171.09999999999999,
175.80000000000001,
169.0,
172.0,
176.69999999999999,
177.0,
179.0,
178.59999999999999,
181.0,
185.19999999999999,
189.30000000000001,
187.5,
184.59999999999999,
179.59999999999999,
172.19999999999999,
174.0,
173.0,
161.80000000000001,
162.59999999999999,
161.0,
154.0,
151.0,
155.0,
156.0,
160.0,
152.5,
152.90000000000001,
130.59999999999999,
122.90000000000001,
116.5,
105.2,
106.0,
104.3,
102.5,
121.0
],
"elev_gain": 805.00000000000193,
"avg_speed": 26.873455222088808,
"day_no": 7,
"avg_active_HR": 126.39402427637722,
"max_speed": 61.019999999999349,
"ttl_dist": 21.0,
"path": [
[
38.109007,
23.839548999999998
],
[
38.107642999999996,
23.83646
],
[
38.106078000000004,
23.833703
],
[
38.104034999999996,
23.831082000000002
],
[
38.102222999999995,
23.828507000000002
],
[
38.100182000000004,
23.826195000000002
],
[
38.098655,
23.824723000000002
],
[
38.097103000000004,
23.824196
],
[
38.094936,
23.823547
],
[
38.093022,
23.822389
],
[
38.091433,
23.821386999999998
],
[
38.090303999999996,
23.819898000000002
],
[
38.089191,
23.818870999999998
],
[
38.088206,
23.817616
],
[
38.088024,
23.81748
],
[
38.088029999999996,
23.817529999999998
],
[
38.087136,
23.818322
],
[
38.084925,
23.818655
],
[
38.08266,
23.819004
],
[
38.080628000000004,
23.819512
],
[
38.078534999999995,
23.820214
],
[
38.07605,
23.820961999999998
],
[
38.074811,
23.82099
],
[
38.072398,
23.820726999999998
],
[
38.070426,
23.820695
],
[
38.06847,
23.820929
],
[
38.066546,
23.820842000000003
],
[
38.066507,
23.822388
],
[
38.066386,
23.824463
],
[
38.066309999999994,
23.82621
],
[
38.064145,
23.825951
],
[
38.061258,
23.825086
],
[
38.058834000000004,
23.821768
],
[
38.057245,
23.81973
],
[
38.055603999999995,
23.818788
],
[
38.053955,
23.81856
],
[
38.052608,
23.816638
],
[
38.052309,
23.818338
],
[
38.05115,
23.817625
],
[
38.049479999999996,
23.815985
],
[
38.048542,
23.816110000000002
],
[
38.047179,
23.817428
],
[
38.045134000000004,
23.818724
],
[
38.043,
23.819353
],
[
38.041806,
23.81942
],
[
38.04105,
23.820369
],
[
38.040982,
23.820807000000002
],
[
38.044072,
23.812164000000003
],
[
38.044638,
23.810016
],
[
38.043735,
23.809074
],
[
38.041777,
23.80885
],
[
38.04116,
23.807752
],
[
38.041931,
23.805367
],
[
38.042784999999995,
23.803681
],
[
38.042782,
23.803387
],
[
38.041090000000004,
23.802407000000002
],
[
38.038813,
23.800654
],
[
38.037146,
23.798722
],
[
38.035362,
23.796703
],
[
38.033455,
23.795054999999998
],
[
38.031105,
23.793009
],
[
38.028657,
23.790854
],
[
38.026081,
23.789347
],
[
38.023432,
23.789244
],
[
38.02111,
23.788941
],
[
38.019038,
23.787978
],
[
38.017084000000004,
23.786223
],
[
38.015378999999996,
23.784731
],
[
38.014309000000004,
23.783737
],
[
38.012658,
23.782249
],
[
38.010979,
23.780738
],
[
38.009515,
23.779408
],
[
38.007883,
23.77789
],
[
38.006208,
23.776360999999998
],
[
38.005143,
23.775495000000003
],
[
38.00399,
23.774741
],
[
38.002283,
23.773316
],
[
38.000426000000004,
23.771614000000003
],
[
37.998627,
23.769378
],
[
37.998037,
23.768984
],
[
37.996059,
23.767959
],
[
37.993736,
23.76691
],
[
37.991533000000004,
23.765838000000002
],
[
37.989394,
23.764144
],
[
37.987501,
23.76216
],
[
37.986932,
23.759769
],
[
37.987322,
23.757593
],
[
37.987728000000004,
23.755502
],
[
37.988186,
23.752868
],
[
37.988405,
23.751718
],
[
37.988924,
23.749171
],
[
37.989474,
23.745793
],
[
37.989847999999995,
23.743484
],
[
37.990276,
23.741132
],
[
37.991499,
23.740586999999998
],
[
37.9928,
23.740997
],
[
37.99375,
23.741293
],
[
37.994264,
23.741201999999998
],
[
37.99638,
23.740781
]
],
"speed": [
0.0,
37.079999999999941,
39.419999999999959,
34.559999999999881,
36.719999999999757,
32.759999999999948,
13.560000000000082,
26.520000000000167,
27.600000000000001,
29.63999999999978,
6.0299999999998368,
23.400000000000002,
23.130000000000248,
15.719999999999891,
1.0800000000000252,
1.0223999999999869,
22.319999999999347,
32.040000000000326,
27.480000000000111,
27.359999999999673,
29.279999999999564,
26.399999999999999,
26.640000000000875,
29.279999999999564,
28.199999999999999,
27.359999999999673,
12.690000000000328,
15.33600000000013,
21.779999999999838,
18.720000000000166,
43.559999999999675,
39.600000000000001,
35.160000000000224,
20.609999999999673,
30.479999999999567,
30.239999999998691,
21.059999999999672,
20.79000000000033,
25.440000000000872,
20.25,
20.520000000000984,
23.040000000001964,
29.520000000002621,
26.399999999999999,
14.76000000000022,
16.704000000000523,
0.83999999999941788,
0.83999999999941788,
21.959999999999127,
25.319999999998256,
26.879999999999562,
28.559999999999128,
17.730000000000654,
11.160000000001309,
4.994999999999755,
32.640000000000875,
36.720000000002621,
32.759999999999131,
33.0,
34.080000000001746,
37.980000000000658,
41.039999999998692,
38.159999999998035,
29.15999999999913,
30.000000000000004,
30.479999999999567,
30.719999999998254,
9.0900000000003285,
26.040000000000873,
27.540000000001964,
22.319999999999347,
25.319999999998256,
24.120000000000434,
26.039999999998688,
1.0079999999997382,
26.280000000000655,
27.120000000002619,
32.040000000005243,
29.699999999999999,
18.503999999997905,
30.959999999994761,
24.960000000003493,
32.039999999998692,
30.600000000000001,
35.040000000005243,
28.199999999999999,
18.072000000001573,
23.76000000000786,
27.0,
5.7199999999997084,
32.399999999999999,
5.4000000000000004,
35.040000000000873,
31.560000000003495,
22.319999999999347,
18.0,
2.952000000001572,
14.759999999994761,
7.9919999999989519
],
"day": "2017-05-01",
"time_form": [
"00:00:00",
"00:00:31",
"00:01:01",
"00:01:31",
"00:02:01",
"00:02:33",
"00:03:05",
"00:03:37",
"00:04:08",
"00:04:38",
"00:05:09",
"00:05:42",
"00:06:14",
"00:06:44",
"00:07:18",
"00:07:51",
"00:08:21",
"00:08:53",
"00:09:24",
"00:09:54",
"00:10:24",
"00:10:55",
"00:11:27",
"00:11:57",
"00:12:27",
"00:12:58",
"00:13:30",
"00:14:02",
"00:14:33",
"00:15:06",
"00:15:36",
"00:16:06",
"00:16:36",
"00:17:07",
"00:17:38",
"00:18:08",
"00:18:38",
"00:19:09",
"00:19:39",
"00:20:11",
"00:20:44",
"00:21:15",
"00:21:46",
"00:22:18",
"00:22:52",
"00:23:26",
"00:24:04",
"00:24:04",
"00:24:35",
"00:25:07",
"00:25:37",
"00:26:07",
"00:26:38",
"00:27:08",
"00:27:38",
"00:28:09",
"00:28:39",
"00:29:09",
"00:29:39",
"00:30:11",
"00:30:42",
"00:31:12",
"00:31:42",
"00:32:14",
"00:32:45",
"00:33:15",
"00:33:47",
"00:34:19",
"00:34:50",
"00:35:20",
"00:35:51",
"00:36:21",
"00:36:52",
"00:37:24",
"00:37:56",
"00:38:27",
"00:38:57",
"00:39:27",
"00:39:58",
"00:40:31",
"00:41:01",
"00:41:32",
"00:42:02",
"00:42:32",
"00:43:03",
"00:43:34",
"00:44:06",
"00:44:36",
"00:45:08",
"00:45:43",
"00:46:13",
"00:46:43",
"00:47:14",
"00:47:46",
"00:48:17",
"00:48:47",
"00:49:21",
"00:49:51",
"00:50:22"
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment