2c:null 2d:["$","title",null,{"children":"Clean Leaflet Map ver. 1.7 (now reading GPX files) | Joe | Observable"}] 32:T7d7,// printTable() // hr_route_dt aq .from(data3) .params({ start: focuss[0].getTime() / 1000, stop: focuss[1].getTime() / 1000 // insta_lag: lag }) .filter((d, $) => (d.time >= $.start) & ($.stop >= d.time)) .derive({ // lag_time: (d, $) => op.lag(d.time, $.insta_lag), delta_time: (d, $) => d.time - op.lag(d.time), // $.insta_lag), delta_alt: (d, $) => d.alt - op.lag(d.alt), // $.insta_lag)) / $.insta_lag, delta_dist: (d, $) => op.deltaDistance(op.lag(d.lat), op.lag(d.lng), d.lat, d.lng) // delta_secs: (d,$) => d.time - op.lag(d.time, $.insta_lag) // look back 5 steps }) .derive({ pace: (d, $) => d.delta_time / 60.0 / (d.delta_dist / 1000) // it says pace but its actually pace: min/km }) .rollup({ int_length: (d) => op.max(d.time) - op.min(d.time), min_time: (d) => op.multiFormat(op.min(d.time)), max_time: (d) => op.multiFormat(op.max(d.time)), // min_lag_time: (d, $) => op.multiFormat(op.min(d.lag_time)), // max_lag_time: (d, $) => op.multiFormat(op.max(d.lag_time)), // min_delta_time: (d) => op.multiFormat(op.min(d.delta_time)), // max_delta_time: (d) => op.multiFormat(op.max(d.delta_time)), // sum_distance: (d) => op.sum(d.delta_dist), // distance ? mean_hr: (d) => op.round(op.mean(d.hr)), min_hr: (d) => op.min(d.hr), max_hr: (d) => op.max(d.hr), vertical: (d) => op.round(10 * op.sum(d.delta_alt)) / 10, total_dist: (d) => op.round(10 * op.sum(d.delta_dist)) / 10, max_pace: (d) => op.round(10 * op.min(d.pace)) / 10 }) .derive({ interval_length: (d) => op.multiFormat(d.int_length), average_pace: (d) => // op.round((d.int_length / 60 / (d.total_dist / 1000)) * 10) / 10 op.multiFormat(d.int_length / 60 / (d.total_dist / 1000) * (60)) }) .derive({ pace_hr_ratio: (d) => op.round( ((10 + d.vertical / d.int_length) / (d.average_pace * d.mean_hr)) * 1000 ) / 1000 }) .select(aq.not("int_length")) .view()33:Ta32,viewof focuss = { const svg = d3 .create("svg") .attr("class", "jocuss") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); // brush -------------------------------------- function brushed(event) { // console.log(event.selection); const selection = event.selection; if (selection) { svg.property( "value", selection.map(x.invert, x).map(d3.timeSecond.round) ); svg.dispatch("input"); } } function brushended(event) { if (!event.selection) { gb.call(brush.move, defaultSelection); } } const brush = d3 .brushX() .extent([ [margin.left, 0.5], [width - margin.right, height - margin.bottom + 0.5] ]) .on("brush", brushed) .on("end", brushended); // end brush ------------------------------- const xg = svg.append("g").call(xAxis); const yg = svg.append("g").call(yAxis); // draw a line where x is time and y is hr // line is a function the creates a path from our lat lng coords data2; svg .selectAll("path.zones") .data(zaria) .join("path") .attr("class", "zones") .attr("stroke", (d, i) => zcolors[i]) .attr("fill", (d, i) => zcolors[i]) .attr("opacity", 0.3) .attr("stroke-width", "1px") .attr("d", (d) => area_j(d)); // HR line svg .append("path") .datum(data3) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 1) .attr("d", hr_line); // // .attr('d', area(x, y.copy().range([height - margin.bottom, 0]))); // altitude line svg .append("path") .datum(data3) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) .attr("d", alt_line); // // speed line svg .append("path") .datum(data3) .attr("fill", "none") .attr("stroke", "rgba(0, 0, 128, 0.6)") // d3.color("#ff3399")) .attr("stroke-width", 1) .attr("d", speed_line); // // speed line svg .append("path") .datum(data3) .attr("fill", "none") .attr("stroke", "rgba(128, 0, 128, 0.8)") // d3.color("#ff3399")) .attr("stroke-width", 1) .attr("d", cadence_line); // const area = d3 .area() .curve(d3.line) // .x(d => x(d.)) .y0(y(0)) .y1((d) => y(d.value)); // node maps a d3 object to html/svg const gb = svg .append("g") .attr("class", "brush") .call(brush) .call(brush.move, defaultSelection); const gt = gb .select("rect.selection") .append("text") .style("dy", "2em") .style("font-size", "5em") .text("mom?"); return svg.node(); }34:Tc6a,jmap = { let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; let map = L.map(container, { zoomSnap: 0, zoomDelta: 0.2, wheelPxPerZoomLevel: 90, boxZoom: true }).fitBounds(bounds); // .setView([53.557799, -113.406994], 13) let osmLayer = L.tileLayer( // 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@1x.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); //initialize svg to add to map L.svg({ clickable: true }).addTo(map); //<<<<<<<<<< const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "auto"); //<<<<<<<<<<<< const zone_scale = d3 .scaleThreshold() .range([1, 2, 3, 4, 5]) .domain(zone_cuts); // should make these external !! they are my zone cut-off rates const Dots = svg .selectAll("circle") .attr("class", "Dots") .data(data2) .join("circle") .attr("id", "dotties") .attr("fill", "none") // added this May 8, it was 'none' // d => // (focuss[0] <= d.date) & (d.date <= focuss[1]) ? color_scale(d.hr) : 'none' // ) .attr("opacity", opacitySlider) //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", (d) => map.latLngToLayerPoint([d.lat, d.lng]).x) .attr("cy", (d) => map.latLngToLayerPoint([d.lat, d.lng]).y) .attr("r", circle_size); Dots.on("mouseover", function () { //function to add mouseover event d3.select(this) .transition() //D3 selects the object we have moused over in order to perform operations on it .duration("150") //how long we are transitioning between the two states (works like keyframes) // .attr("fill", "red") //change the fill .attr("stroke", "#333") .attr("stroke-width", 2) .attr("r", 20); //change radius }).on("mouseout", function () { //reverse the action based on when we mouse off the the circle d3.select(this) .transition() .duration("150") // .attr("fill", d => color_scale(d.hr)) .attr("stroke", "none") .attr("r", 5); }); // tooltips Dots.append("title").text((d) => `Zone ${zone_scale(d.hr)} HR: ${d.hr}`); const // line is a function the creates a path from our lat lng coords line = d3 .line() .x((d) => map.latLngToLayerPoint([d.lat, d.lng]).x) .y((d) => map.latLngToLayerPoint([d.lat, d.lng]).y); const d_str = line(data2); // const d_str = line(j_dt.objects()); const Path = svg .append("path") //.style("stroke", path_color) .style("stroke", "black") .style("stroke-width", 1) .style("fill", "none") .attr("d", d_str); // who calls this? const update = () => { Dots.attr("cx", (d) => map.latLngToLayerPoint([d.lat, d.lng]).x).attr( "cy", (d) => map.latLngToLayerPoint([d.lat, d.lng]).y ); Path.attr("d", line(j_dt.objects())); }; map.on("zoomend", update); }35:T5c8,theme_Flat = ` :scope { position: relative; display: inline-block; width: 740px; --thumb-size: 15px; --thumb-radius: calc(var(--thumb-size) / 2); padding: var(--thumb-radius) 0; color: #3b99fc; margin: 2px; vertical-align: middle; } :scope .range-track { box-sizing: border-box; position: relative; height: 7px; background-color: hsl(0, 0%, 80%); overflow: visible; border-radius: 4px; padding: 0 var(--thumb-radius); } :scope .range-track-zone { box-sizing: border-box; position: relative; } :scope .range-select { box-sizing: border-box; position: relative; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); cursor: ew-resize; background: currentColor; height: 7px; border: inherit; } /* Expands the hotspot area. */ :scope .range-select:before { content: ""; position: absolute; width: 100%; height: var(--thumb-size); left: 0; top: calc(2px - var(--thumb-radius)); } :scope .range-select:focus, :scope .thumb:focus { outline: none; } :scope .thumb { box-sizing: border-box; position: absolute; width: var(--thumb-size); height: var(--thumb-size); background: #fcfcfc; top: -4px; border-radius: 100%; border: 1px solid hsl(0,0%,55%); cursor: default; margin: 0; } :scope .thumb:active { box-shadow: inset 0 var(--thumb-size) #0002; } :scope .thumb-min { left: calc(-1px - var(--thumb-radius)); } :scope .thumb-max { right: calc(-1px - var(--thumb-radius)); } `36:[{"id":"8ccafac5883dd82f0cdb8080321ad5ffb7e377c4cfc664e0fb69150700f15f8f31cd03dc12af58c6c428588e02fa05566361bc1c1f162dcbd3e6425f07a0d649","href":"https://static.observableusercontent.com/files/8ccafac5883dd82f0cdb8080321ad5ffb7e377c4cfc664e0fb69150700f15f8f31cd03dc12af58c6c428588e02fa05566361bc1c1f162dcbd3e6425f07a0d649","name":"image.png","type":"image/png","lastModified":1616537543411.965,"size":54602},{"id":"2b5cfdd4b47b87cd1170ff4ea631c86e2a028fe9570b9a6a0966dcb061a1e04a186082fb32f2c92fe6eb1f281a590597e2988e16436add45ba5ce0295973c4da","href":"https://static.observableusercontent.com/files/2b5cfdd4b47b87cd1170ff4ea631c86e2a028fe9570b9a6a0966dcb061a1e04a186082fb32f2c92fe6eb1f281a590597e2988e16436add45ba5ce0295973c4da","name":"activity_15278966650.gpx","type":"application/xml","lastModified":1715143843667.179,"size":4851845},{"id":"a6263246a27d4c1344d6acd37894befde9f3ff0d41e10d85d7c6437bd22679c781e22470c97fbf5d78a14a3512f1dbfac7a383f471875f25fa9fe92c2cb28805","href":"https://static.observableusercontent.com/files/a6263246a27d4c1344d6acd37894befde9f3ff0d41e10d85d7c6437bd22679c781e22470c97fbf5d78a14a3512f1dbfac7a383f471875f25fa9fe92c2cb28805","name":"Follow_the_little_arrows_and_have_faith.gpx","type":"application/xml","lastModified":1630529692451.941,"size":1563468}] 30:{"id":"223c47b5ee932e15","slug":"clean-leaflet-map-ver-1-7-now-reading-gpx-files","title":"Clean Leaflet Map ver. 1.7 (now reading GPX files)","thumbnail":"801fa6b20e6c34b13bcd081afe3e705974aaee14bc3dd409113d64ac720c8bec","access_level":"public","create_time":"$D2021-03-23T22:12:23.411Z","update_time":"$D2024-06-21T15:11:44.836Z","view_time":null,"first_public_time":"$D2021-03-23T22:17:40.408Z","fork":{"id":"4baa516d24eafcf2","slug":"clean-leaflet-map-ver-1-6","title":"Clean Leaflet Map ver. 1.6","owner":{"id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe"}},"stars":2,"starred":false,"owner":{"type":"team","id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":"starter_2024"},"version":2112,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null}],"members":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Clean Leaflet Map ver. 1.7 (now reading GPX files)","cells":[{"id":0,"value":"md`# Clean Leaflet Map ver. 1.7 (now reading GPX files)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`\nTo data from Strava, go to page of work-out, and click on the three circles beside the pencil (in left hand column) and then click on \"Export GPX\". \n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`## Upload file from your computer by clicking on the \"Choose file\" button below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"viewof inputFile0 = localFileInput({\n accept: \".gpx\",\n value: FileAttachment(\"Follow_the_little_arrows_and_have_faith.gpx\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1760,"value":"inputFile = inputFile0.blob()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`## Set your max and min heatrate below`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"maxHR = 178","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"minHR = 46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"zone_cuts = zone_cutsF(maxHR, minHR)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"md`## Slide the grey rectangle left or right to see your heart rate zone on the map\nYou can also change its size by grabbing one of its edges.\n\nThe map itself is resizable, in addition a \"shift-click\" will let you select a region to zoom in on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"alt_extrema = hr_route_dt\n .rollup({\n max_alt: (d) => op.max(d.alt),\n min_alt: (d) => op.min(d.alt),\n min_lng: (d) => op.min(d.lng),\n max_lng: (d) => op.max(d.lng),\n min_lat: (d) => op.min(d.lat),\n max_lat: (d) => op.max(d.lat)\n // max_speed: (d) => op.max(d.alt), // ???????????????????????//\n // min_speed: (d) => op.min(d.alt),\n })\n .objects()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1969,"value":"hr_rt_smooth_dt = aq\n .from(data3)\n .params({\n start: focuss[0].getTime() / 1000,\n stop: focuss[1].getTime() / 1000\n })\n .filter((d, $) => (d.time > $.start) & (d.time < $.stop))\n\n// .derive({\n// lag_time: (d, $) => op.lead(d.time, $.lag) - op.lag(d.time, $.lag)\n// })\n// .derive({\n// lag_time_up: (d) => d.fill_up(d.lag_time)\n// })\n// .derive({\n// lag_time_down: (d) => d.fill_down(d.lag_time_up)\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"viewof lag = Inputs.range([1, 300], {\n label: \"Smoothing Lag\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"insert histogram for stats like HR here for selection\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2064,"value":"hr_rt_smooth_dt.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"hr_rt_smooth_dt_objs = hr_rt_smooth_dt.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"{\n const thresh = 50;\n return Plot.plot({\n y: { grid: true },\n marks: [\n Plot.areaY(\n hr_rt_smooth_dt_objs,\n Plot.binX(\n { y: \"proportion\", filter: null },\n { x: \"hr\", thresholds: thresh, fillOpacity: 0.2 }\n )\n ),\n Plot.lineY(\n hr_rt_smooth_dt_objs,\n Plot.binX(\n { y: \"proportion\", filter: null },\n { x: \"hr\", thresholds: thresh, fillOpacity: 0.2 }\n )\n ),\n Plot.areaY(\n data3,\n Plot.binX(\n { y: \"proportion\", filter: null },\n // { y: (d) => d.count / data3.length, filter: null },\n { x: \"hr\", thresholds: thresh, fillOpacity: 0.2 }\n )\n ),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"Plot.binX(data3.hr).x1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof circle_size = Range([0, 11], { value: 7, label: \"Data point size\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"// Karvonen formula %effort * (maxHR - minHR) + minHR\nzone_cutsF = (maxHR, minHR) => {\n return [0.7, 0.85, 0.9, 0.95, 1].map(d => (maxHR - minHR) * d + minHR);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"//json_data = {\n// return togeojson.gpx(new DOMParser().parseFromString(XML_File, 'text/xml'));\n//}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"parser = new DOMParser()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"getElevation = (trkpt) => {\n let ele = trkpt.getElementsByTagName(\"ele\")[0].textContent;\n return parseFloat(ele); // what is this constant? 3.28 = feet / meter\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"getTime = (trkpt) => {\n let time = trkpt.getElementsByTagName(\"time\")[0].textContent;\n // return time;\n // 2019-07-06T16:05:55.000Z\n return d3.utcParse(\"%Y-%m-%dT%H:%M:%S.%LZ\")(time) / 1000;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"// stolen from Matt Devine, then adjusted\nfunction getPoints(file_string) {\n let parsed = parser.parseFromString(file_string, \"text/xml\");\n let trkpts = [...parsed.getElementsByTagName(\"trkpt\")];\n return trkpts.map((trkpt, i) => ({\n idx: i,\n lng: parseFloat(trkpt.getAttribute(\"lon\")),\n lat: parseFloat(trkpt.getAttribute(\"lat\")),\n alt: getElevation(trkpt),\n time: getTime(trkpt),\n hr: parseInt(trkpt.getElementsByTagName(\"ns3:hr\")[0].textContent),\n cadence: parseInt(trkpt.getElementsByTagName(\"ns3:cad\")[0].textContent)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"getPoints(gpx)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"json_data = getPoints(XML_File)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1897,"value":"hr_route = json_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"file_data = parser.parseFromString(\"activity_15278966650.gpx\", \"text/xml\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"gpx = FileAttachment(\"activity_15278966650.gpx\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"togeojson = require('@mapbox/togeojson@0.16.0/togeojson.js').catch(\n () => window[\"toGeoJSON\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"// defines a function that takes system time in utcSeconds and returns a nicely formatted string.\nmultiFormat = {\n var formatMillisecond = d3.timeFormat(\".%L\"),\n formatSecond = d3.utcFormat(\" :%S\"),\n formatMinute = d3.utcFormat(\" %M:%S\"),\n formatHour = d3.utcFormat(\"%H:%M:%S\"),\n formatDay = d3.timeFormat(\"%a %d\"),\n formatWeek = d3.timeFormat(\"%b %d\"),\n formatMonth = d3.timeFormat(\"%B\"),\n formatYear = d3.timeFormat(\"%Y\");\n\n function multiFormat(secs) {\n // const secs = d3.utcSeconds(s);\n return (secs < 60 ? formatSecond : secs < 3600 ? formatMinute : formatHour)(\n secs * 1000\n ); // secs * 1000 milli_s / sec == millisecs\n }\n aq.addFunction(\"multiFormat\", multiFormat, { override: true });\n return multiFormat;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"times = {\n const t = j_dt.rollup({\n start: d => op.min(d.rtime_rt),\n stop: d => op.max(d.rtime_rt)\n });\n return { start: t.get('start', 0), stop: t.get('stop', 0) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"f_dt = j_dt\n .params({ start: timeSlider[0], stop: timeSlider[1] })\n .filter(\n (d, $) =>\n ($.start <= d.rtime_rt - op.min(d.rtime_rt)) &\n (d.rtime_rt - op.min(d.rtime_rt) <= $.stop)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"// this let's the map circle markers update way faster...\ndependency = {\n d3.select('svg.leaflet-zoom-animated')\n .selectAll('circle')\n .attr('fill', d =>\n (focuss[0] <= d.date) & (d.date <= focuss[1]) ? color_scale(d.hr) : 'none'\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"color_scale = d3\n .scaleThreshold()\n .range([z1_color, z2_color, z3_color, z4_color, z5_color])\n .domain(zone_cuts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"x = d3\n .scaleTime()\n // .domain(d3.extent(j_dt.objects(), d => new Date(d.rtime_rt * 1000)))\n .domain(d3.extent(data2, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"y_alt = d3\n .scaleLinear()\n .domain([alt_extrema.min_alt, alt_extrema.max_alt]) // hack\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"y_speed = {\n // data3.rollup({})\n return d3\n .scaleLinear()\n .domain([0, 40]) // hack\n .range([height - margin.bottom, margin.top]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2011,"value":"y_cadence = {\n // data3.rollup({})\n return d3\n .scaleLinear()\n .domain([0, 200]) // hack\n .range([height - margin.bottom, margin.top]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"y = d3\n .scaleLinear()\n .domain([60, 190])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"alt_line = d3\n .line()\n .x((d) => x(d.date))\n .y((d) => y_alt(d.alt))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"speed_line = d3\n .line()\n .x((d) => x(d.date))\n .y((d) => y_speed(d.speed_smooth)) /// not d.alt but d.something","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"cadence_line = d3\n .line()\n .x((d) => x(d.date))\n .y((d) => y_cadence(d.cadence_smooth)) /// not d.alt but d.something","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"hr_line = d3\n .line()\n .x((d) => x(d.date))\n .y((d) => y(d.hr_smooth))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"height = width / 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(\n d3\n .axisLeft(y)\n .ticks(height / 20)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"// defaultSelection = [x(d3.timeMinute.offset(x.domain()[1], -5)), x.range()[1]]\ndefaultSelection = [\n x(x.domain()[0]),\n x(d3.timeMinute.offset(x.domain()[0], +5))\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"area = (x, y) =>\n d3\n .area()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(y(60))\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`here is a handy color picker lib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"opacitySlider = 0.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"zcolors = [z1_color, z2_color, z3_color, z4_color, z5_color]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`## Zone 1 color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof z1_color = colorPicker(\"rgba(124, 172, 207,255)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`## Zone 2 color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof z2_color = colorPicker(\"rgba(74, 199, 70,255)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`## Zone 3 color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof z3_color = colorPicker(\"rgb(222, 176, 11)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`## Zone 4 color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof z4_color = colorPicker(\"rgb(219, 9, 9)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`## Zone 5 color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof z5_color = colorPicker(0, 0, 0, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`## Path color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof path_color = colorPicker(\"rgba(0, 6, 8, 0.57)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof timeSlider = rangeSlider({\n title: 'Run Time',\n description: 'My slider description.',\n min: 0,\n max: times.stop - times.start,\n width: '550px',\n // Default value. Note that values must be specified as array of length 2.\n // value: [1, 1.9]\n // Custom slider CSS, replaces all styles. If you want to use one of the predefined\n // themes, remember to import it along with rangeSlider.\n theme: theme_Flat,\n // Overrides the range color. Support for range colors is up to the theme.\n // color: 'hsl(20, 100%, 40%)',\n format: '2.0f'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"margin = ({ top: 5, left: 25, right: 5, bottom: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"import { colorPicker } from \"@leonelgalan/color-picker-with-alpha-and-optional-pickroptions-see-code\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"dt = aq.from(route)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"corners = dt\n .rollup({\n min_lat: d => op.min(d.lat),\n min_lng: d => op.min(d.lng),\n max_lat: d => op.max(d.lat),\n max_lng: d => op.max(d.lng)\n })\n .objects()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"bounds = [\n L.latLng(corners.min_lat, corners.min_lng),\n L.latLng(corners.max_lat, corners.max_lng)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"// this needs tweeking\n\nzaria = zone_cuts.map((d, i, a) => [\n { xj: x.domain()[0], y1j: a[i - 1] | 0, y2j: d }, // y.domain()[0]\n { xj: x.domain()[1], y1j: a[i - 1] | 0, y2j: d } // y.domain()[0]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"XML_File.slice(0, 3000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"XML_File = Files.text(inputFile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"localFileContent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"area_j = d3\n .area()\n .x(d => x(d.xj))\n .y0(d => y(d.y1j))\n .y1(d => y(d.y2j))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`---\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = localFileContent //FileAttachment(\"_4_min_intervals_Esso_Hill_with_Paul_G_.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"json_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"function jdist(lat1, lon1, lat2, lon2) {\n // const orig = t.slice(0, 1).objects()[0];\n // const dest = t.slice(1, 2).objects()[0];\n const R = 6385e3; // metres\n const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians\n const φ2 = (lat2 * Math.PI) / 180;\n const Δφ = ((lat2 - lat1) * Math.PI) / 180;\n const Δλ = ((lon2 - lon1) * Math.PI) / 180;\n\n const a =\n Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +\n Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n\n const d = R * c; // in metres\n return d; //{ φ1, φ2, Δφ, Δλ, a, c, d };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"hr_route_dt\n .derive({\n delta_dist: (d) =>\n op.deltaDistance(d.lat, d.lng, op.lag(d.lat), op.lag(d.lng))\n })\n .view(600)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"data3 = hr_route_dt\n .derive({\n delta_dist: (d) =>\n op.deltaDistance(op.lag(d.lat), op.lag(d.lng), d.lat, d.lng),\n delta_secs: (d) => d.time - op.lag(d.time)\n })\n .derive({\n hr_smooth: aq.rolling((d) => op.mean(d.hr), [-lag, lag]),\n cadence_smooth: aq.rolling((d) => op.mean(d.cadence), [-lag, lag]),\n total_dist: aq.rolling((d) => op.sum(d.delta_dist)),\n speed: (d) => d.delta_dist / 1000 / (d.delta_secs / 3600)\n })\n .derive({\n speed_smooth: aq.rolling((d) => op.mean(d.speed), [-lag, lag])\n })\n .objects()\n .map(function (d) {\n const date = new Date(d.time * 1000);\n return { ...d, date: date };\n })\n .slice(1, -1)\n//.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"// \"fields\":[\"time\",\"latlng\",\"elevation\",\"h_accuracy\",\"v_accuracy\",\"speed\",\"course\",\"device_time\",\"distance\"]},[[1615053774.097169,[53.560027,-113.419893],631.983414,7.99958,2.4,0,102.665967,1615053773.999983,0],[1615053775.104867,[53.560024,-113.419815],631.943129,7.99958,2.4,3.70463,93.105976,1615053774.999982,5.177325],[1615053776.103993,[53.560018,-113.41973],631.833271,7.99958,2.4,3.713184,95.514902,1615053775.999981,10.905053],[1615053777.10706,[53.560015,-113.419644],631.95343,7.99958,2.4,3.713184,94.989012,1615053776.99998,16.608007],[1615053778.105431,[53.560015,-113.419552],631.83357,7.99958,2.4,4.324539,92.953185,1615053777.999979,22.664094],[1615053779.103891,[53.560018,-113.419458],632.328322,7.99958,2.4,4.456013,88.845755,1615053778.999979,28.917098],[1615053780.1108,[53.560017,-113.419346],632.342971,7.99958,2.4,5.583451,90.355849,1615053779.999978,36.317771],[1615053781.103029,[53.560022,-113.419248],632.736006,7.99958,2.4,5.780312,88.10289,1615053780.999977,42.849152],","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"aq.addFunction('deltaDistance', jdist, { override: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"{\n const lat1 = 53.523746,\n lng1 = -113.479912,\n lat2 = 53.523797,\n lng2 = -113.479778;\n const r = d3.geoDistance([lat1, lng1], [lat2, lng2]);\n return r * 6371e3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// route = data.data[0].values.map((r, i) => ({\n// idx: i,\n// time: r[0],\n// lat: r[1][0],\n// lng: r[1][1]\n// }))\nhr_route_old = {\n const zip_a = d3.zip(\n json_data.features[0].geometry.coordinates,\n json_data.features[0].properties.coordTimes\n // json_data.features[0].properties.heartRates <<<<<<<<<<<<<<<<<<<<<<<<<<< not in GPX?\n );\n const route = zip_a.map((r, i) => ({\n idx: i,\n // time: r[0],\n lat: r[0][1],\n lng: r[0][0],\n alt: r[0][2],\n time: Date.parse(r[1]) / 1000,\n orig_time: r[1],\n hr: r[2]\n }));\n return route;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"route = hr_route.map(d => ({\n idx: d.idx,\n lat: d.lat,\n lng: d.lng,\n alt: d.alt,\n time: d.time\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"hr_route_dt = {\n \n const dt = aq.from(hr_route)\n \n return dt\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"hr_route_dt.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"hr = hr_route.map(d => ({ idx: d.idx, hr: d.hr, time: d.time }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// hr = json_data.features[0].[1].values.map((r, i) => ({ idx: i, time: r[0], hr: r[1] }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`\n---------\n### timestamps are quite different! `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"hr.slice(0, 5).map(d => new Date(d.time * 1000))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"route.slice(0, 5).map(d => new Date(d.time * 1000))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`### what is the average time delta for the two tables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"route_dt = aq.from(route)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"comb_dt = {\n const route_dt = aq.from(route);\n const hr_dt = aq.from(hr);\n return route_dt.join(hr_dt, 'idx').select({\n lat: 'lat',\n lng: 'lng',\n alt: 'alt',\n hr: 'hr',\n time_1: 'time_rt',\n time_2: 'time_hr'\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"comb_dt\n .derive({\n delta_rt: d => d.time_rt - op.lag(d.time_rt),\n delta_hr: d => d.time_hr - op.lag(d.time_hr)\n })\n .rollup({\n mean_delta_dt: d => op.mean(d.delta_rt),\n mean_delta_hr: d => op.mean(d.delta_hr),\n std_delta_dt: d => op.stdev(d.delta_rt),\n std_delta_hr: d => op.stdev(d.delta_hr),\n max_delta_dt: d => op.max(d.delta_rt),\n max_delta_hr: d => op.max(d.delta_hr)\n })\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"rcomb_dt = comb_dt.derive({\n rtime_rt: d => op.round(d.time_rt),\n rtime_hr: d => op.round(d.time_hr)\n})\n// .view(30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"j_dt = {\n const hr = rcomb_dt.select('hr', 'rtime_hr');\n const rt = rcomb_dt.select('lat', 'lng', 'rtime_rt', 'alt');\n const jt = hr.join_right(rt, ['rtime_hr', 'rtime_rt']);\n return jt\n .select('hr', 'lat', 'lng', 'rtime_rt', 'alt')\n .orderby('rtime_rt') // sort by time\n .derive({ hr: d => op.fill_down(d.hr, 100) })\n .groupby('rtime_rt')\n .rollup({\n hr: d => op.mean(d.hr),\n lat: d => op.mean(d.lat),\n lng: d => op.mean(d.lng),\n alt: d => op.mean(d.alt)\n })\n .orderby('rtime_rt');\n // .derive({ time: d => new Date(d.rtime_rt * 1000) }); // sort by time\n\n // .derive({ hr: d => (d.hr ? d.hr : op.lag(d.hr)) }); // impute hr values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"data2 = j_dt\n .params({})\n .objects()\n .map(function (d) {\n // change seconds to milliseconds to Date\n const date = new Date(d.rtime_rt * 1000);\n return { ...d, date: date };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"data2.view","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"j_dt.view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"j_dt\n .groupby('hr')\n .count()\n .derive({\n z: d =>\n d.hr < 124\n ? 1\n : d.hr < 150\n ? 2\n : d.hr < 159\n ? 3\n : d.hr < 173\n ? 4\n : d.hr >= 173\n ? 5\n : 0\n })\n .groupby('z')\n .rollup({ zcount: d => op.sum(d.count) })\n .filter(d => d.z > 0)\n .derive({ perc: d => op.round((d.zcount / op.sum(d.zcount)) * 1000) / 10 })\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"threeDots = FileAttachment(\"image.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"mutable localFileContent = 'No File Chosen Yet'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"// what does this do? an unnamed function..\n// but wait, it seems to reassign the \"window.readFile\" func with the \"readFile\" func here\n{\n function readFile(event) {\n const inputElement = event.target;\n const inputFile = inputElement.files[0];\n\n var reader = new FileReader();\n reader.onload = function(loadedEvent) {\n const parsedResult = togeojson.gpx(\n new DOMParser().parseFromString(inputFile, 'text/xml')\n );\n\n // const parsedResult = JSON.parse(loadedEvent.target.result);\n\n mutable localFileContent = json_data;\n };\n\n reader.readAsText(inputFile);\n }\n\n return (window.readFile = readFile);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"import { rangeSlider, themes, theme_NoUiSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// this is necessary to get tiling correct !! (why?)\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"import { localFileInput } from \"@mbostock/localfile\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"