2b:null 2c:["$","title",null,{"children":"Clean Leaflet Map ver. 1.6 | Joe | Observable"}] 31:T7d6,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 svg .append('path') .datum(data2) // .attr('fill', 'steelblue') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 1) .attr('d', line); // // .attr('d', area(x, y.copy().range([height - margin.bottom, 0]))); const area = d3 .area() .curve(d3.line) // .x(d => x(d.)) .y0(y(0)) .y1(d => y(d.value)); 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); const gt = gb .select("rect.selection") .append('text') .style('dy', '2em') .style('font-size', '5em') .text('mom?'); return svg.node(); }32:Tc1f,jmap = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 0.9}px` }); yield container; let map = L.map(container, { zoomSnap: 0, zoomDelta: 0.2, wheelPxPerZoomLevel: 90, boxZoom: true }) // .setView([53.557799, -113.406994], 13) .fitBounds(bounds); 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":1615433597514.463,"size":54602}] 2f:{"id":"4baa516d24eafcf2","slug":"clean-leaflet-map-ver-1-6","title":"Clean Leaflet Map ver. 1.6","thumbnail":"04438fcc0734904719b97c35b690edf985500e7acab109ac9b627d3644d10cfa","access_level":"public","create_time":"$D2021-03-11T02:32:10.731Z","update_time":"$D2021-03-23T22:11:45.513Z","view_time":null,"first_public_time":"$D2021-03-11T03:52:48.995Z","fork":true,"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":1102,"publish_version":1102,"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":3,"collection":null,"type":"notebook","body":{"title":"Clean Leaflet Map ver. 1.6","cells":[{"id":0,"value":"md`# Clean Leaflet Map ver. 1.6 \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 json 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 Original\". \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":1064,"value":"maxHR = 178","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":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: 5, 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":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":"dependency = {\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":805,"value":"// zone_cuts = [124, 150, 159, 173, 200]","pinned":true,"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) // should make these external !! they are my zone cut-off rates","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":540,"value":"line = d3\n .line()\n .x(d => x(d.date))\n .y(d => y(d.hr))","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]]","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":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":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}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"hr = data.data[1].values.map((r, i) => ({ idx: i, time: r[0], hr: r[1] }))","pinned":false,"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\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\n const parsedResult = JSON.parse(loadedEvent.target.result);\n mutable localFileContent = parsedResult;\n }\n \n reader.readAsText(inputFile);\n }\n \n return window.readFile = readFile;\n}","pinned":false,"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"