32:T461,stats = { var avgSpeed = trkpts.reduce((acc,val) => acc + speedKmH(val.speed),0)/trkpts.length; var varianceSpeed = trkpts.reduce((acc,val) => acc + Math.pow(speedKmH(val.speed)-avgSpeed,2),0)/trkpts.length; var avgIncline = trkpts.reduce((acc,val) => acc + val.incline,0)/trkpts.length; var varianceIncline = trkpts.reduce((acc,val) => acc + Math.pow(val.incline-avgIncline,2),0)/trkpts.length; return "Avg speed: "+format2d(avgSpeed)+"Km/h (Max: "+format2d(Math.max(...trkpts.map(v => speedKmH(v.speed))))+" Min: "+format2d(Math.min(...trkpts.map(v => speedKmH(v.speed))))+")"+ "| Variance: "+format2d(varianceSpeed)+ " | std deviation: "+format2d(Math.sqrt(varianceSpeed))+" "+ "\nAvg incline: "+format2d(avgIncline)+"% (Max: "+format2d(Math.max(...trkpts.map(v => v.incline)))+" Min: "+format2d(Math.min(...trkpts.map(v => v.incline)))+")| Variance: "+format2d(varianceIncline)+ " | std deviation: "+format2d(Math.sqrt(varianceIncline))+"\n"+ " Elevation Max: "+format2d(Math.max(...trkpts.map(v => v.elevation)))+"m Min: "+format2d(Math.min(...trkpts.map(v => v.elevation)))+"m"; }33:Tea1,chart = { const svg = d3.select(DOM.svg(width, height)).on("mousemove", mouseMoved); d3.select("body").on("keydown", keyMove); svg.append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", "0 -5 10 10") .attr("opacity", 0.4) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); if(dateDistSwitch === "date") { svg.append("g").call(timeAxisBottom); } else { svg.append("g").call(distAxisBottom); } if(elevType === "elevation") { svg.append("g").call(elevAxisLeft); } else { if(viewIncline) { svg.append("g").call(inclineAxisLeft); } else if(viewAvgIncline) { svg.append("g").call(avgInclineAxisLeft); } } if(viewSpeed) { svg.append("g").call(speedAxisRight); } else if(viewAvgSpeed) { svg.append("g").call(avgSpeedAxisRight); } if(viewType === "line") { if(elevType === "elevation") { addCurve(svg,elevLine,elevColor); } else { if(viewIncline) { addCurve(svg,inclineLine,inclineColor); } if(viewAvgIncline) { addCurve(svg,avgInclineLine,avgInclineColor); } } if(viewSpeed) { addCurve(svg,speedLine,speedColor); } if(viewAvgSpeed) { addCurve(svg,avgSpeedLine,avgSpeedColor); } } else { if(elevType === "elevation") { addPoints(svg,(pt) => elev(pt.elevation),elevColor); } else { if(viewIncline) { addPoints(svg,(pt) => incline(pt.incline),inclineColor); } if(viewAvgIncline) { addPoints(svg,(pt) => avgIncline(pt.avgIncline),avgInclineColor); } } if(viewSpeed) { addPoints(svg,(pt) => speed(speedKmH(pt.speed)),speedColor); } if(viewAvgSpeed) { addPoints(svg,(pt) => avgSpeed(speedKmH(pt.avgSpeed)),avgSpeedColor); } } drawMouseVerticalBar(svg,mouseColor); drawMouseCircle( svg, mouseColor, margin.top, moment.utc( moment(trkpts[currentPointIndex].date,"HH:mm:ss") .diff(moment(trkpts[firstPointIndex()].date,"HH:mm:ss")) ).format("HH:mm:ss")+" / "+ new Intl.NumberFormat({maximumFractionDigits:2}).format((trkpts[currentPointIndex].distTotal/1000))+"km" ); var inclMsg = new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[currentPointIndex].avgIncline)+"%"; if(viewInclineArrow) { drawInclineBar(svg,elevColor,elev(trkpts[currentPointIndex].elevation),inclMsg); } if(elevType === "elevation") { drawMouseCircle( svg,elevColor,elev(trkpts[currentPointIndex].elevation), new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[currentPointIndex].elevation)+"m" ); } else { if(viewIncline) { drawMouseCircle( svg,inclineColor,incline(trkpts[currentPointIndex].incline), inclMsg ); } if(viewAvgIncline && trkpts[currentPointIndex].avgIncline != 0 && trkpts[currentPointIndex].avgIncline) { drawMouseCircle( svg,avgInclineColor,avgIncline(trkpts[currentPointIndex].avgIncline), inclMsg ); } } if(viewSpeed) { var realSpeed = speedKmH(trkpts[currentPointIndex].speed); if(realSpeed && realSpeed > 0) { drawMouseCircle( svg,speedColor,speed(realSpeed), new Intl.NumberFormat({maximumFractionDigits:2}).format(realSpeed)+"km/h" ); } } if(viewAvgSpeed) { var realSpeed = speedKmH(trkpts[currentPointIndex].avgSpeed); if(realSpeed && realSpeed > 0) { drawMouseCircle( svg,avgSpeedColor,avgSpeed(realSpeed), new Intl.NumberFormat({maximumFractionDigits:2}).format(realSpeed)+"km/h" ); } } return svg.node(); }34:T8be,controlLayers = { L.control.scale({imperial: false}).addTo(map); var OpenTopoMap = L.tileLayer( 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { attribution: 'Map data: © OpenStreetMap, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'} ).addTo(map); var OpenStreetMap_France = L.tileLayer( 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution: '© Openstreetmap France | © OpenStreetMap'} ); var OpenStreetMap_Org = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© Openstreetmap | © OpenStreetMap'} ); var Geoportail_Map = L.tileLayer( "https://wxs.ign.fr/pratique/geoportail/wmts?" + "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" + "&STYLE=normal" + "&TILEMATRIXSET=PM" + "&FORMAT=image/jpeg"+ "&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS"+ "&TILEMATRIX={z}" + "&TILEROW={y}" + "&TILECOL={x}", { minZoom : 0, maxZoom : 18, attribution : "IGN-F/Geoportail", tileSize : 256 // les tuiles du Géooportail font 256x256px } ); var Geoportail_Photos = L.tileLayer( "https://wxs.ign.fr/pratique/geoportail/wmts?" + "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" + "&STYLE=normal" + "&TILEMATRIXSET=PM" + "&FORMAT=image/jpeg"+ "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+ "&TILEMATRIX={z}" + "&TILEROW={y}" + "&TILECOL={x}", { minZoom : 0, maxZoom : 18, attribution : "IGN-F/Geoportail", tileSize : 256 // les tuiles du Géooportail font 256x256px } ); var baseMaps = { "OpenTopoMap": OpenTopoMap, "OpenStreetMap_France": OpenStreetMap_France, "OpenStreetMap_Org": OpenStreetMap_Org, "Geoportail_Map" : Geoportail_Map, "Geoportail_Photos": Geoportail_Photos }; return L.control.layers(baseMaps, {}).addTo(map); }35:T525,initTrcLyrGrp = { tracLayerGroup.clearLayers(); var startIcon = L.divIcon({ className:"startIcon", html: '' }); let start = [trkpts[firstPointIndex()].latitude, trkpts[firstPointIndex()].longitude]; let startMarker = L.marker(start, {icon: startIcon}).bindPopup( 'First point
'+ trkpts[firstPointIndex()].date ); var stopIcon = L.divIcon({ className:"endIcon", html: '' }); let stop = [trkpts[lastPointIndex()].latitude, trkpts[lastPointIndex()].longitude]; let stopMarker = L.marker(stop, {icon: stopIcon}).bindPopup( 'Last point
'+ trkpts[lastPointIndex()].date+'
'+ new Intl.NumberFormat({maximumFractionDigits:2}).format((trkpts[lastPointIndex()].distTotal/1000))+'Km' ); /* let trackLine = L.polyline( trkpts.map(trkpt => [trkpt.latitude,trkpt.longitude]), { color: mouseColor, opacity: 0.8 } ); */ var trackLine = L.polycolor( trkpts.map(trkpt => [trkpt.latitude,trkpt.longitude]), { colors: colorGradient, weight: 5 } ); map.fitBounds(trackLine.getBounds()); tracLayerGroup.addLayer(startMarker); tracLayerGroup.addLayer(stopMarker); tracLayerGroup.addLayer(trackLine); }36:T689,colorGradient = { var gradientFunc = d3.interpolateRgb(gradientFromColor, gradientToColor); if(gradientType === 'interpolateHsl') { gradientFunc = d3.interpolateHsl(gradientFromColor, gradientToColor); } if(gradientType === 'interpolateHslLong') { gradientFunc = d3.interpolateHslLong(gradientFromColor, gradientToColor); } if(gradientType === 'interpolateLab') { gradientFunc = d3.interpolateLab(gradientFromColor, gradientToColor); } if(colorGradientType === "elevation") { return trkpts.map(trkpt => gradientFunc( (trkpt.elevation-elevBounds[0]) / (elevBounds[1]-elevBounds[0]) ) ); } else if(colorGradientType === "incline") { return trkpts.map(trkpt => gradientFunc( (trkpt.incline-inclineBounds[0]) / (inclineBounds[1]-inclineBounds[0]) ) ); } else if(colorGradientType === "avgIncline") { return trkpts.map(trkpt => gradientFunc( (trkpt.avgIncline-avgInclineBounds[0]) / (avgInclineBounds[1]-avgInclineBounds[0]) ) ); } else if(colorGradientType === "speed") { return trkpts.map(trkpt => gradientFunc( (speedKmH(trkpt.speed)-speedKmHBounds[0]) / (speedKmHBounds[1]-speedKmHBounds[0]) ) ); } else if(colorGradientType === "avgSpeed") { return trkpts.map(trkpt => gradientFunc( (speedKmH(trkpt.avgSpeed)-avgSpeedKmHBounds[0]) / (avgSpeedKmHBounds[1]-avgSpeedKmHBounds[0]) ) ); } else { return trkpts.map(trkpt => mouseColor); } }37:T5c8,currentMarker = { var currentLatLon = [trkpts[currentPointIndex].latitude, trkpts[currentPointIndex].longitude]; var popupContent = 'Current point
'+ 'Time: '+moment.utc( moment(trkpts[currentPointIndex].date,"HH:mm:ss") .diff(moment(trkpts[firstPointIndex()].date,"HH:mm:ss")) ).format("HH:mm:ss")+'
'+ 'Distance: '+new Intl.NumberFormat({maximumFractionDigits:2}).format((trkpts[currentPointIndex].distTotal/1000))+'Km
'+ 'Elevation: '+new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[currentPointIndex].elevation)+'m
'+ 'Incline: '+new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[currentPointIndex].incline)+'%
'+ 'Avg Incline: '+new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[currentPointIndex].avgIncline)+'%
'+ 'Speed: '+new Intl.NumberFormat({maximumFractionDigits:2}).format(speedKmH(trkpts[currentPointIndex].speed))+"Km/h
"+ 'Avg Speed: '+(trkpts[currentPointIndex].avgSpeed ? new Intl.NumberFormat({maximumFractionDigits:2}).format(speedKmH(trkpts[currentPointIndex].avgSpeed))+"Km/h" :'n/a'); if(this) { this.setLatLng(currentLatLon); this.setPopupContent(popupContent); if(!this.isPopupOpen()) { this.togglePopup(); } return this; } else { var marker = L.circleMarker(currentLatLon).bindPopup(popupContent); if(!marker.isPopupOpen()) { marker.togglePopup(); } return marker; } }38:T4e8,function drawInclineBar(svg, color, y, msg) { var angle = Math.atan(trkpts[currentPointIndex].avgIncline/100.0); var x = getX(trkpts[currentPointIndex]); var length = inclineArrowSize; var x2 = Math.cos(angle) * length var y2 = -Math.sin(angle) * length svg.append("g") .attr("transform", "translate("+x+","+(margin.top/2.0)+")") .append("line") .attr("x2", x2) .attr("y2", y2) .attr("transform", "translate("+(-length/2.0)+",0)") .attr("stroke", color) .attr("stroke-opacity","0.5") .attr("marker-end", "url(#arrow)"); svg.append("g") .attr("transform", "translate("+x+","+(margin.top/2.0)+")") .append("line") .attr("x2", length) .attr("transform", "translate("+(-length/2.0)+",0)") .attr("stroke", color); svg.append("g") .attr("transform", "translate("+x+","+(margin.top/2.0)+")") .append("line") .attr("y2", y2) .attr("transform", "translate("+(-length/2.0)+",0)") .attr("stroke", color); svg.append("text") .attr("transform", "translate("+(x+(length/2.0)+10)+","+(margin.top/2.0)+")") .text( msg ) .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight","bold") .attr("fill", color); }39:T4c4,function trkptsByDate(gpxXmlContent) { return Array.from(gpxXmlContent.getElementsByTagName('trkpt')) .reduce((result, trkpt, index, data) => { let lat = floatAttribute(trkpt,'lat'); var lon = floatAttribute(trkpt,'lon'); var date = trackPointDate(trkpt); var dist = 0; var distTotal = 0; var speed = 0; var incline = 0; var elevation = trackPointElev(trkpt); if(index && index > 0) { var prevTrkpt = result[index-1]; dist = distFromLatLon( lat, lon, prevTrkpt.latitude, prevTrkpt.longitude ); distTotal = dist + prevTrkpt.distTotal speed = dist * 1000 / (date - prevTrkpt.date); incline = 100 * (elevation - prevTrkpt.elevation) / dist; } result.push({ latitude: lat, longitude: lon, date: date, elevation: elevation, distance: dist, distTotal: distTotal, speed: speed, incline: incline }); return result; }, [] ) .sort((p1,p2) => +p1.date - +p2.date) .map((value,index,data) => { return { ...value, avgSpeed: computAvgSpeed(value,index,data), avgIncline: computAvgIncline(value,index,data) }; } ); }3a:[] 31:{"title":"GPX Track viewer","cells":[{"id":0,"value":"md`# GPX Track viewer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof gpxFile = file({\n title: \"Upload GPX file\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2997,"value":"An example of mountain bike track can be downloaded [here](https://gist.github.com/gfoo/bb9531f7398179a20947575500f41cde)","pinned":false,"hidden":false,"mode":"md"},{"id":2361,"value":"viewof viewType = select({\n title: \"Line style\",\n options: [\"line\", \"point\"],\n value: \"line\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof elevColor = color({\n value: \"#4682B4\",\n title: \"Elevation line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"viewof inclineColor = color({\n value: \"#df65b0\",\n title: \"Incline line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2354,"value":"viewof avgInclineColor = color({\n value: \"#fc8d59\",\n title: \"Average incline line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"viewof speedColor = color({\n value: \"#fc8d59\",\n title: \"Speed line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"viewof avgSpeedColor = color({\n value: \"#74c476\",\n title: \"Average speed line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"viewof mouseColor = color({\n value: \"#B22222\",\n title: \"Mouse cursor\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"viewof viewAvgSpeed = checkbox({\n title: \"View average speed\",\n options: [{ value: \"true\", label: \"\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"viewof viewSpeed = checkbox({\n title: \"View speed\",\n options: [{ value: \"true\", label: \"\" }],\n value: \"false\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2978,"value":"viewof elevType = select({\n title: \"Data type\",\n options: [\"elevation\", \"incline\"],\n value: \"elevation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2343,"value":"viewof viewAvgIncline = checkbox({\n title: \"View average incline\",\n options: [{ value: \"true\", label: \"\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"viewof viewIncline = checkbox({\n title: \"View incline\",\n options: [{ value: \"true\", label: \"\" }],\n value: \"false\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2909,"value":"viewof avgSpeedWindow = slider({\n min: 1, \n max: 300, \n step: 1, \n value: 30,\n title: \"Average speed window\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2306,"value":"viewof avgInclineWindow = slider({\n min: 1, \n max: 300, \n step: 1, \n value : 30,\n title: \"Average incline window\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2713,"value":"viewof inclineArrowSize = slider({\n min: 1, \n max: 100, \n step: 1, \n value : 40,\n title: \"Incline arrow size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2729,"value":"viewof viewInclineArrow = checkbox({\n title: \"View incline arrow\",\n options: [{ value: \"true\", label: \"\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2802,"value":"viewof dateDistSwitch = select({\n title: \"Scale type\",\n options: [\"date\", \"distance\"],\n value: \"date\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"value":"infos = {\n var names = Array.from(gpxXmlContent.getElementsByTagName('name'));\n var name = (names && names.length >= 1 ? names[0].textContent : '?');\n var dist = new Intl.NumberFormat({maximumFractionDigits:2}).format(trkpts[lastPointIndex()].distTotal/1000);\n var duration = moment.utc(\n moment(trkpts[lastPointIndex()].date,\"HH:mm:ss\")\n .diff(moment(trkpts[firstPointIndex()].date,\"HH:mm:ss\"))\n ).format(\"HH:mm:ss\");\n return \"Name: \"+name+ \" | Distance: \"+dist+ \"Km | Duration: \"+duration;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2463,"value":"sampling = {\n var start = moment(trkpts[firstPointIndex()].date);\n var end = moment(trkpts[lastPointIndex()].date);\n var diff = end.diff(start);\n return \"Nb pts: \"+trkpts.length+ \" | pt(s)/sec: \"+new Intl.NumberFormat({maximumFractionDigits:2}).format((+trkpts.length/(+diff/1000.0)))+\" | 1 pt every \"+new Intl.NumberFormat({maximumFractionDigits:2}).format(((+diff/1000.0)/trkpts.length))+\"sec\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2770,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"mapContainer = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container; \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"viewof colorGradientType = select({\n title: \"colorGradientType\",\n options: [\"avgSpeed\", \"speed\", \"elevation\", \"incline\", \"avgIncline\", \"none\"],\n value: \"avgSpeed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2412,"value":"viewof gradientType = select({\n title: \"colorGradientType\",\n options: [\"interpolateRgb\", \"interpolateHsl\", \"interpolateHslLong\", \"interpolateLab\"],\n value: \"avgSpeed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"viewof gradientFromColor = color({\n value: \"#ef6548\",\n title: \"Gradient from color\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2392,"value":"viewof gradientToColor = color({\n value: \"#238443\",\n title: \"Gradient to color\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"map = {\n var mymap = L.map(mapContainer); \n return mymap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1727,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"tracLayerGroup = {\n return L.layerGroup([]).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"iconsStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"addCurrentMrkTrcLyrGrp = {\n if(tracLayerGroup && currentMarker && !tracLayerGroup.hasLayer(currentMarker)) {\n tracLayerGroup.addLayer(currentMarker);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"minLon = Math.min(...trkpts.map(trkpt => trkpt.longitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"maxLon = Math.max(...trkpts.map(trkpt => trkpt.longitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"minLat = Math.min(...trkpts.map(trkpt => trkpt.latitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"maxLat = Math.max(...trkpts.map(trkpt => trkpt.latitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"function speedKmH(speed) {\n return (speed * 3600) / 1000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"function drawMouseCircle(svg,color,y,msg) {\n svg.append(\"g\")\n .attr(\"stroke\", color)\n .append(\"circle\")\n .attr(\"cx\", pt => getX(trkpts[currentPointIndex]))\n .attr(\"cy\", y) \n .attr(\"fill\", color)\n .attr(\"fill-opacity\", 0.2)\n .attr(\"r\", 5); \n svg.append(\"text\")\n .attr(\"x\", getX(trkpts[currentPointIndex]) + 10)\n .attr(\"y\", y)\n .text( msg )\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"14px\")\n .attr(\"font-weight\",\"bold\")\n .attr(\"fill\", color);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"function drawMouseVerticalBar(svg, color) {\n svg.append(\"g\")\n .attr(\"transform\", `translate(`+getX(trkpts[currentPointIndex])+`,0)`)\n .append(\"line\")\n .attr(\"y1\", height - margin.bottom)\n .attr(\"y2\", margin.top)\n .attr(\"stroke\", color);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"function mouseMoved() {\n var first = trkpts[firstPointIndex()];\n var last = trkpts[lastPointIndex()];\n if(dateDistSwitch === \"date\") {\n var mouseDate = time.invert(d3.mouse(this)[0]);\n if(mouseDate < first.date || mouseDate > last.date) {\n mutable currentPointIndex = mouseDate < first.date ? firstPointIndex() : lastPointIndex(); \n } else {\n mutable currentPointIndex = trkpts.findIndex(pt => pt.date >= mouseDate);\n } \n } else {\n var mouseDist = distTotal.invert(d3.mouse(this)[0])*1000.0;\n if(mouseDist < first.distTotal || mouseDist > last.distTotal) {\n mutable currentPointIndex = mouseDist < first.distTotal ? firstPointIndex() : lastPointIndex(); \n } else {\n mutable currentPointIndex = trkpts.findIndex(pt => pt.distTotal >= mouseDist);\n } \n }\n \n \n d3.event.preventDefault();\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"function keyMove() {\n if(d3.event.keyCode === 37) {\n mutable currentPointIndex = prevPointIndex();\n }\n if(d3.event.keyCode === 39) {\n mutable currentPointIndex = nextPointIndex();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"function addCurve(svg, line, color) {\nsvg.append(\"path\")\n .datum(trkpts)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", color)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"function addPoints(svg,ptsFunc,color) {\n svg.append(\"g\")\n .attr(\"stroke\", color)\n .attr(\"stroke-opacity\", 0.2)\n .selectAll(\"circle\")\n .data(trkpts)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", pt => getX(pt))\n .attr(\"cy\", pt => ptsFunc(pt)) \n .attr(\"fill\", color)\n .attr(\"r\", 1); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"function firstPointIndex() {\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"function lastPointIndex() {\n return trkpts.length-1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"function prevPointIndex() {\n return currentPointIndex === firstPointIndex() ? firstPointIndex() : currentPointIndex - 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"function nextPointIndex() {\n return currentPointIndex === lastPointIndex() ? lastPointIndex() : currentPointIndex + 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"mutable currentPointIndex = firstPointIndex()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2824,"value":"function getX(pt) {\n if(dateDistSwitch === \"date\") {\n return time(pt.date);\n } else {\n return distTotal(pt.distTotal/1000.0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"distTotal = d3.scaleLinear()\n .domain(d3.extent(trkpts, pt => pt.distTotal/1000.0))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2811,"value":"distAxisBottom = g => g\n.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n.call(d3.axisBottom(distTotal).ticks(width/50))\n.call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", width - margin.right - 20)\n .attr(\"y\", margin.bottom - 15)\n .attr(\"text-anchor\", \"start\")\n .text(\"Distance (Km)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2814,"value":"time = d3.scaleTime()\n .domain(d3.extent(trkpts, pt => pt.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"timeAxisBottom = g => g\n.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n.call(d3.axisBottom(time).ticks(width/50))\n.call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", width - margin.right - 20)\n .attr(\"y\", margin.bottom - 15)\n .attr(\"text-anchor\", \"start\")\n .text(\"Date\")\n )\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"elevLine = d3.line()\n .defined(d => !isNaN(d.elevation))\n .x(pt => getX(pt))\n .y(pt => elev(pt.elevation))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2083,"value":"elevBounds = d3.extent(trkpts, pt => pt.elevation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2270,"value":"elev = d3.scaleLinear()\n .domain(elevBounds)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2289,"value":"elevAxisLeft = g => g\n.attr(\"transform\", `translate(${margin.left},0)`)\n.attr(\"stroke\", elevColor)\n.call(d3.axisLeft(elev))\n.call(g => g.select(\".domain\"))\n.call(g => g.append(\"text\")\n .attr(\"fill\", elevColor)\n .attr(\"y\", margin.top - 5)\n .attr(\"text-anchor\", \"start\")\n .text(\"Elevation (meter)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2274,"value":"inclineLine = d3.line()\n .defined(d => !isNaN(d.incline))\n .x(pt => getX(pt))\n .y(pt => incline(pt.incline))","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"inclineBounds = d3.extent(trkpts, pt => pt.incline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"incline = d3.scaleLinear()\n .domain(inclineBounds)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"inclineAxisLeft = g => g\n.attr(\"transform\", `translate(${margin.left},0)`)\n.attr(\"stroke\", inclineColor)\n.call(d3.axisLeft(incline))\n.call(g => g.select(\".domain\"))\n.call(g => g.append(\"text\")\n .attr(\"fill\", inclineColor)\n .attr(\"y\", margin.top - 5)\n .attr(\"text-anchor\", \"start\")\n .text(\"Incline (%)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"speedLine = d3.line()\n .defined(d => !isNaN(d.speed) && d.speed > 0)\n .x(pt => getX(pt))\n .y(pt => speed(speedKmH(pt.speed)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"speedKmHBounds = d3.extent(trkpts, pt => speedKmH(pt.speed))","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"speed = d3.scaleLinear()\n .domain(speedKmHBounds)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"speedAxisRight = g => g\n.attr(\"transform\", `translate(${width - margin.right},0)`)\n.attr(\"stroke\", speedColor)\n.call(d3.axisRight(speed))\n.call(g => g.select(\".domain\"))\n.call(g => g.append(\"text\")\n .attr(\"fill\", speedColor)\n .attr(\"y\", margin.top - 5)\n .attr(\"text-anchor\", \"start\")\n .text(\"Speed (km/h)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"avgSpeedLine = d3.line()\n .defined(d => !isNaN(d.avgSpeed) && d.avgSpeed)\n .x(pt => getX(pt))\n .y(pt => avgSpeed(speedKmH(pt.avgSpeed)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2125,"value":"avgSpeedKmHBounds = d3.extent(trkpts, pt => speedKmH(pt.avgSpeed))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"avgSpeed = d3.scaleLinear()\n .domain(viewSpeed ? speedKmHBounds : avgSpeedKmHBounds)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"avgSpeedAxisRight = g => g\n.attr(\"transform\", `translate(${width - margin.right},0)`)\n.attr(\"stroke\", avgSpeedColor)\n.call(d3.axisRight(avgSpeed))\n.call(g => g.select(\".domain\"))\n.call(g => g.append(\"text\")\n .attr(\"fill\", avgSpeedColor)\n .attr(\"y\", margin.top - 5)\n .attr(\"text-anchor\", \"start\")\n .text(\"Avg Speed (km/h)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2332,"value":"avgInclineLine = d3.line()\n .defined(d => !isNaN(d.avgIncline) && d.avgIncline)\n .x(pt => getX(pt))\n .y(pt => avgIncline(pt.avgIncline))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"avgInclineBounds = d3.extent(trkpts, pt => pt.avgIncline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2336,"value":"avgIncline = d3.scaleLinear()\n .domain(viewIncline ? inclineBounds : avgInclineBounds)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2345,"value":"avgInclineAxisLeft = g => g\n.attr(\"transform\", `translate(${margin.left},0)`)\n.attr(\"stroke\", avgInclineColor)\n.call(d3.axisLeft(avgIncline))\n.call(g => g.select(\".domain\"))\n.call(g => g.append(\"text\")\n .attr(\"fill\", avgInclineColor)\n .attr(\"y\", margin.top - 5)\n .attr(\"text-anchor\", \"start\")\n .text(\"Avg Incline (%)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"margin = ({top: 50, right: 200, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"function floatAttribute(elem,attr) {\n return parseFloat(elem.getAttribute(attr));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"function trackPointElev(trkpt) {\n return parseFloat(trkpt.querySelector(\"ele\").textContent);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"function trackPointDate(trkpt) {\n return new Date(trkpt.querySelector(\"time\").textContent);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"function deg2rad(deg) {\n return deg * (Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"function distFromLatLon(lat1,lon1,lat2,lon2) {\n var R = 6371008; // average radius of the earth in m\n var dLat = deg2rad(lat2-lat1);\n var dLon = deg2rad(lon2-lon1); \n var a = \n Math.sin(dLat/2) * Math.sin(dLat/2) +\n Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * \n Math.sin(dLon/2) * Math.sin(dLon/2)\n ; \n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); \n var d = R * c; // Distance in m\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"trkpts = trkptsByDate(gpxXmlContent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"function computAvgIncline(value, index,data) {\n var minIndex = index - avgInclineWindow;\n var maxIndex = index + avgInclineWindow;\n\n if(minIndex >= 0 && maxIndex <= data.length - 1) {\n var inclineSum = data.slice(minIndex,maxIndex+1).reduce((acc, val) => parseFloat(val.incline) + parseFloat(acc),0);\n return inclineSum /(1+(2*avgInclineWindow));\n } \n else {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"function computAvgSpeed(value, index,data) {\n var minIndex = index - avgSpeedWindow;\n var maxIndex = index + avgSpeedWindow;\n\n if(minIndex >= 0 && maxIndex <= data.length - 1) {\n var speedSum = data.slice(minIndex,maxIndex+1).reduce((acc, val) => parseFloat(val.speed) + parseFloat(acc),0);\n return speedSum /(1+(2*avgSpeedWindow));\n } \n else {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"gpxXmlContent = await parseGPX(gpxFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2443,"value":"async function parseGPX(file) {\n let text = await Files.text(file)\n return await new window.DOMParser().parseFromString(text, 'text/xml')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"function format2d(num) {\n return new Intl.NumberFormat({maximumFractionDigits:2}).format(num);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"L = {\n const L = window.L = await require('leaflet@1.3.1');\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2043,"value":"leafletPolycolor = {\n var lp = await require('https://bundle.run/leaflet-polycolor@0.9.1');\n lp(L);\n return lp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2906,"value":"import {checkbox,file,color,select,slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2924,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}