2b:null 2c:["$","title",null,{"children":"Clean Leaflet Map ver. 1.7.1 | Joe | Observable"}] 31:T1220,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) { // set value of view svg.property( "value", selection.map(x.invert, x).map(d3.timeSecond.round) ); // tell listeners of view that things have changed 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 const yAlt = d3 .scaleLinear() .domain(alt_extent) .range([height - margin.bottom, y(140)]); const alt_line = d3 .line() .x(d => x(new Date(d.time * 1000))) //d.orig_time)) .y(d => yAlt(d.alt)); const hr_line = d3 .line() .x(d => x(d.date)) .y(d => y(d.hr)); // pace line const yPace = d3 .scaleLinear() .domain([0, 6]) .range([height - margin.bottom, y(140)]); const pace_line = d3 .line() .x(d => x(new Date(d.time * 1000))) //d.orig_time)) .y(d => yPace(d.ra)); svg .append('path') .datum(hr_route_dt.objects().slice(1)) .attr('fill', 'none') .attr('stroke', 'blue') .attr('stroke-width', 1) .attr('d', pace_line); // altitude line svg .append('path') .datum(hr_route_dt.objects()) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 1) .attr('d', alt_line); // heatrate line svg .append('path') .datum(data2) .attr('fill', 'none') .attr('stroke', 'red') .attr('stroke-width', 1) .attr('d', hr_line); // const area_j = d3 .area() .x(d => x(d.xj)) .y0(d => y(d.y1j)) .y1(d => y(d.y2j)); 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)); // node maps a d3 object to html/svg const gb = svg .append("g") .attr("class", "brush") .call(brush) .call(brush.move, defaultSelection); function keydown(event) { console.log(event.ctrlKey, event.altKey, event.key); const shift_dist = event.shiftKey ? 10 : 1; const extent = d3.brushSelection(gb.node()); switch (event.key) { case "ArrowRight": { console.log("brushSelection", d3.brushSelection(gb.node())); // const selection = d3.brushSelection(gb) ? null : x.range(); let dLeft = event.ctrlKey ? Math.min(extent[0] + shift_dist, extent[1]) : extent[0]; let dRight = event.altKey ? Math.min(extent[1] + shift_dist, width - margin.right) : extent[1]; if (!(event.ctrlKey || event.altKey)) { const max_shift = width - margin.right - extent[1]; dLeft = extent[0] + Math.min(shift_dist, max_shift); dRight = extent[1] + Math.min(shift_dist, max_shift); } gb.call( brush.move, [ Math.min(dLeft, width - margin.right), Math.min(dRight, width - margin.right) ] || x.range() ); event.stopPropagation(); event.preventDefault(); break; } case "ArrowLeft": { let dLeft = event.ctrlKey ? extent[0] - shift_dist : extent[0]; let dRight = event.altKey ? extent[1] - shift_dist : extent[1]; if (!(event.ctrlKey || event.altKey)) { const max_shift = extent[0] - margin.left; dLeft = extent[0] - Math.min(shift_dist, max_shift); dRight = extent[1] - Math.min(shift_dist, max_shift); } gb.call( brush.move, [Math.max(dLeft, margin.left), Math.max(dRight, margin.left)] || x.range() ); event.cancelBubble = true; event.stopPropagation(); event.preventDefault(); break; } } } d3.select(window).on("keydown", keydown); return svg.node(); }32:Tc17,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') // 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-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); }33: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)); } `34:[{"id":"8ccafac5883dd82f0cdb8080321ad5ffb7e377c4cfc664e0fb69150700f15f8f31cd03dc12af58c6c428588e02fa05566361bc1c1f162dcbd3e6425f07a0d649","href":"https://static.observableusercontent.com/files/8ccafac5883dd82f0cdb8080321ad5ffb7e377c4cfc664e0fb69150700f15f8f31cd03dc12af58c6c428588e02fa05566361bc1c1f162dcbd3e6425f07a0d649","name":"image.png","type":"image/png","lastModified":1616682149505.483,"size":54602}] 2f:{"id":"c389fcdbaeffc6b3","slug":"clean-leaflet-map-ver-1-7-1","title":"Clean Leaflet Map ver. 1.7.1","thumbnail":"9ca37e28295f92632b330523a88ec95ca2af165314d75239af27ff5e79df2629","access_level":"public","create_time":"$D2021-03-25T14:22:29.505Z","update_time":"$D2021-03-27T14:51:35.702Z","view_time":null,"first_public_time":"$D2021-03-25T19:39:42.420Z","fork":{"id":"223c47b5ee932e15","slug":"clean-leaflet-map-ver-1-7-now-reading-gpx-files","title":"Clean Leaflet Map ver. 1.7 (now reading GPX files)","owner":{"id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":"starter_2024"},"version":1701,"publish_version":1701,"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":1,"collection":null,"type":"notebook","body":{"title":"Clean Leaflet Map ver. 1.7.1","cells":[{"id":0,"value":"md`# Clean Leaflet Map ver. 1.7.1\n- ~~adding keyboard events~~\n use left and right arrow keys in combination with shift, alt and ctrl. Play with it, it'll make sense. :-)\n - change gradations from pixes \n- alt, pace features with toggle\n- zoomable focuss?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`## Note: Nothing will look right until you've loaded a working GPX file\n\nTo get one 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 here `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"viewof inputFile = html``","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 = 180","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"minHR = 48","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":1183,"value":"// printTable()\nhr_route_dt\n .params({\n start: focuss[0].getTime() / 1000,\n stop: focuss[1].getTime() / 1000\n })\n .filter((d, $) => (d.time >= $.start) & ($.stop >= d.time))\n .rollup({\n // int_length: (d, $) => $.stop - $.start, //op.max(d.time) - op.min(d.time),\n // distance ?\n median_hr: d => op.round(op.median(d.hr)),\n min_hr: d => op.min(d.hr),\n max_hr: d => op.max(d.hr),\n median_pace: d => op.multiFormat(op.median(1000 / d.ra)),\n min_pace: d => op.multiFormat(1000 / op.min(d.ra)),\n max_pace: d => op.multiFormat(1000 / op.max(d.ra)),\n\n vertical: d => op.round(10 * op.sum(d.delta_alt)) / 10,\n total_dist: d => op.round(10 * op.sum(d.delta_dist)) / 10\n })\n .derive({\n interval_length: (d, $) => op.multiFormat($.stop - $.start),\n pace_skm: (d, $) => (($.stop - $.start) / d.total_dist) * 1000 // we need secs/km\n })\n .derive({})\n\n .derive({\n pace_hr_ratio: d => op.round((d.pace_skm / d.median_hr) * 100) / 100\n })\n .select(aq.not('pace_skm'))\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","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":1207,"value":"hr_route_dt = {\n const dt = aq\n .from(hr_route)\n .orderby('idx')\n .derive({\n delta_dist: d =>\n op.deltaDistance(op.lag(d.lat), op.lag(d.lng), d.lat, d.lng),\n delta_alt: d => d.alt - op.lag(d.alt)\n })\n .derive({ ra: aq.rolling(d => op.median(d.delta_dist), [-5, 0], 0) });\n\n return dt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"alt_extent = {\n const t = hr_route_dt.rollup({\n minAlt: d => op.min(d.alt),\n maxAlt: d => op.max(d.alt)\n });\n return [t.get(\"minAlt\", 0), t.get(\"maxAlt\", 0)];\n}","pinned":true,"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":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":"multiFormat = {\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":false,"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":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":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":1118,"value":"XML_File = Files.text(inputFile)","pinned":false,"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":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":1263,"value":"aq.addFunction('deltaDistance', jdist, { override: true })","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 = {\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\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":false,"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 time: d.time\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\n .join(hr_dt, 'idx')\n .select({\n lat: 'lat',\n lng: 'lng',\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');\n const jt = hr.join_right(rt, ['rtime_hr', 'rtime_rt']);\n return jt\n .select('hr', 'lat', 'lng', 'rtime_rt')\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 })\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 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":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":"{\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":"$33","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":false,"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"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"