30:T15bc,map = { let map = this; if (!map) { // let center = projection.invert([width / 2, height / 2]); map = new mapboxgl.Map({ container, style: r, center: [-127, 51.8], scrollZoom: false, zoom: 5.3, maxZoom: 12, minZoom: 4 // maxBounds: bounds // Set the map's geographical boundaries. }); } // add navigation controls (zoom buttons, pitch & rotate) const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on("load", function () { map.addControl(new mapboxgl.NavigationControl()); // Keep track of which images we've already added const addedImages = new Set(); // Handle missing images map.on("styleimagemissing", function (e) { // console.log("Handling missing image:", e.id); // You could load a placeholder image here if needed }); // Process each image one at a time to avoid race conditions const loadImages = async () => { for (const item of groupsData) { if (!item.file || item.group === undefined) continue; // Convert group to string and check if we've already added it const groupId = String(item.group); if (addedImages.has(groupId)) { console.log(`Image for group ${groupId} already added, skipping`); continue; } try { const iconImage = await item.file.image(); console.log(`Adding image for group: ${groupId}`); map.addImage(groupId, iconImage); addedImages.add(groupId); } catch (error) { console.error(`Error adding image for group ${groupId}:`, error); } } console.log("All images processed"); // Now you can add your layers that use these images // addLayers(); }; loadImages(); }); map.on("mouseenter", "hexbins", function (e) { map.getCanvas().style.cursor = "default"; const coordinates = e.features[0].geometry.coordinates.slice(); const properties = e.features[0].properties; // mutable debug = properties; const catText = properties.Location === undefined ? "none" : properties.Organization; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // make the date more readable let firstCatch = new Date(properties.firstCatch).toLocaleString(undefined, { timeZone: "utc", year: "numeric", month: "numeric", day: "numeric" }); const dataLine = dataSentinels .filter((d) => d.Location === properties.Location) .sort((a, b) => a.Date - b.Date); // mutable debug = properties; // if (d3.sum(dataLine, (d) => d.total) > 0) { // dataLine.map((d) => { // console.log(new Date(d.Date)); // }); // console.log(Number(properties.totalTODate)); popup .setLngLat(coordinates) .setHTML( `

${catText}
Location: ${properties.Location}
Total over last 3 days: ${ properties.total }
Total dungeness caught to date: ${Number( properties.totalTODate ).toFixed( 0 )}

` ) .addTo(map); const width1 = 125, height1 = 25; const svgElement = popup .getElement() .getElementsByClassName("popup-d3-svg")[0]; const svg = d3 .select(svgElement) .attr("width", width1) .attr("height", height1); // .style("background-color", "black"); const margin = { top: 2, right: 3, bottom: 1, left: 4 }; const x1 = d3 .scaleTime() .domain(d3.extent(dataLine, (d) => d.Date)) .range([margin.left, width1 - margin.right]); const y1 = d3 .scaleLinear() .domain(d3.extent(dataLine, (d) => d.total)) .nice() .range([height1 - margin.bottom, margin.top]); svg .append("path") .datum(dataLine) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x((d) => x1(d.Date)) .y((d) => y1(d.total)) ); map.on("mouseleave", "hexbins", function () { map.getCanvas().style.cursor = ""; popup.remove(); }); map.on("click", "hexbins", function (e) { // console.log(e); mutable siteClicked = e.features[0].properties.Location; container.value.selected = { lng: e.lngLat.lng, lat: e.lngLat.lat, data: e.features[0].properties }; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); }); // invalidation.then(() => map.remove()); // Wait until the map loads, then yield the container again. yield new Promise((resolve) => { if (map.loaded()) resolve(map); else map.on("load", () => resolve(map)); }); let fc = { type: "FeatureCollection", features: hexgeo }; if (map._loaded) { if (!map.getSource("hexbins")) { map.addSource("hexbins", { type: "geojson", data: fc }); } else { map.getSource("hexbins").setData(fc); } if (map.getLayer(hexbinLayer.id)) { map.removeLayer(hexbinLayer.id); } // console.log("adding layer") map.addLayer(hexbinLayer); // map.flyTo(projection.invert([100,1000])) // console.log("flying") // } return true; } }31:Tb0a,function Scrubber( values, { format = (value) => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {} ) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (timer !== null) clearTimeout(timer), (timer = null); if (interval !== null) clearInterval(interval), (interval = null); } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (interval !== null) clearInterval(interval), (interval = null); timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = (event) => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }32:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1652808703400.937,"size":756420},{"id":"97250e18736aae4a4e1581c9cd7769d08e91e57606ee4a9b4c8e7c03629479445d2c516813f192d421a794e4d1138f2bcde51a6bde84557c05a87e45cb9f2bca","href":"https://static.observableusercontent.com/files/97250e18736aae4a4e1581c9cd7769d08e91e57606ee4a9b4c8e7c03629479445d2c516813f192d421a794e4d1138f2bcde51a6bde84557c05a87e45cb9f2bca","name":"lightrapchecked_megalopa2 copy 2-1 (2).png","type":"image/png","lastModified":1744649798558.687,"size":21936},{"id":"c529ce05681e24dc684f1714225253f914b1c5cf7f4b577e1e392aee1e1f52fa685a7be4107148ab5c9b8650de6929129f7f6f822e2ef69ccc8dc6c7a2f467dc","href":"https://static.observableusercontent.com/files/c529ce05681e24dc684f1714225253f914b1c5cf7f4b577e1e392aee1e1f52fa685a7be4107148ab5c9b8650de6929129f7f6f822e2ef69ccc8dc6c7a2f467dc","name":"lighttrapchecked.png","type":"image/png","lastModified":1653680512678.282,"size":6355},{"id":"4e677d83bfdff3c955672cfd09fad30f21c5547bd2f45e16c75226b741bc85753e21e71fb14391fd085d9d57db70517a4fcd4be7c7917b348b1c04a542c2627c","href":"https://static.observableusercontent.com/files/4e677d83bfdff3c955672cfd09fad30f21c5547bd2f45e16c75226b741bc85753e21e71fb14391fd085d9d57db70517a4fcd4be7c7917b348b1c04a542c2627c","name":"notchecked.png","type":"image/png","lastModified":1653680657742.214,"size":5321},{"id":"b5450d511b88c626bad1118409bf8f896425d43fe61ac3c8718cb15f76342fe00dd4d49016c38bca9e7885441cc9b4ee7f8273e3eb712b1f84cae1b1fd63a7d1","href":"https://static.observableusercontent.com/files/b5450d511b88c626bad1118409bf8f896425d43fe61ac3c8718cb15f76342fe00dd4d49016c38bca9e7885441cc9b4ee7f8273e3eb712b1f84cae1b1fd63a7d1","name":"lightrapchecked_megalopa@1.png","type":"image/png","lastModified":1653680757316.132,"size":12060},{"id":"cd87f7fa116ff9cc29a06487dfb320fd059504384fa8224dec500fee6c17dd9e81a9d28b2b8d97c955c1306779532d02d4d1d70f1fc80176c352452dad7e4d66","href":"https://static.observableusercontent.com/files/cd87f7fa116ff9cc29a06487dfb320fd059504384fa8224dec500fee6c17dd9e81a9d28b2b8d97c955c1306779532d02d4d1d70f1fc80176c352452dad7e4d66","name":"lightrapchecked_megalopa@2.png","type":"image/png","lastModified":1653681473875.708,"size":11390},{"id":"fe2f4b2fc40ce07589d1886207585216582e20e0ee227a7687abeda74b58be24fc62823455a10e94b8323968aa895230e3b0bc4bd3a49a1b199f8bfec40d5a63","href":"https://static.observableusercontent.com/files/fe2f4b2fc40ce07589d1886207585216582e20e0ee227a7687abeda74b58be24fc62823455a10e94b8323968aa895230e3b0bc4bd3a49a1b199f8bfec40d5a63","name":"lighttrapchecked@1.png","type":"image/png","lastModified":1653681536928.587,"size":6340},{"id":"a0e80694c7e8b957b1e88680c8b5ee2a68334a5fddc55c982fe6aed06413edaa608e321cfea1b5a8391705c702e5a04eec0b434527ecba8dbf4fbd771d09dca6","href":"https://static.observableusercontent.com/files/a0e80694c7e8b957b1e88680c8b5ee2a68334a5fddc55c982fe6aed06413edaa608e321cfea1b5a8391705c702e5a04eec0b434527ecba8dbf4fbd771d09dca6","name":"notchecked@1.png","type":"image/png","lastModified":1653681580714.533,"size":5019},{"id":"92229a9e9d21c6861099c486dd170877f4e13315037cce8648dd3cb2b6f9e0fc9931c92fa0efae91004f559a40ef22c2e69609a1842a700b04ec0296f2658c2c","href":"https://static.observableusercontent.com/files/92229a9e9d21c6861099c486dd170877f4e13315037cce8648dd3cb2b6f9e0fc9931c92fa0efae91004f559a40ef22c2e69609a1842a700b04ec0296f2658c2c","name":"crab.png","type":"image/png","lastModified":1652816408574.032,"size":2593},{"id":"9992a46a0889a20b25d5626e35ff7feaed3f75dc96f901daa10142effb9a58ed5328585d8789ceebe5f4086bace9c0da83e6f74c3ef5723ff547fad95566d504","href":"https://static.observableusercontent.com/files/9992a46a0889a20b25d5626e35ff7feaed3f75dc96f901daa10142effb9a58ed5328585d8789ceebe5f4086bace9c0da83e6f74c3ef5723ff547fad95566d504","name":"Drawing.png","type":"image/png","lastModified":1652818024846.551,"size":23773},{"id":"5e060541a410e27141720dfa848b20efa91dc7211c3ed56275115397facd722338349e81b5b08d18d23c43ac2ad12f0d7d61344d61c11e183d752bd3f3b95470","href":"https://static.observableusercontent.com/files/5e060541a410e27141720dfa848b20efa91dc7211c3ed56275115397facd722338349e81b5b08d18d23c43ac2ad12f0d7d61344d61c11e183d752bd3f3b95470","name":"movement-rus-2 copy@1.png","type":"image/png","lastModified":1652818974540.57,"size":1999},{"id":"4f56b99b02f7045e3f03f1988d6964c10006323ab865b4c4810ef83e08523f9e65fbdb288c908efab88359c907d1bc4a863cea61e413a3e2bc17bb01e735a5a4","href":"https://static.observableusercontent.com/files/4f56b99b02f7045e3f03f1988d6964c10006323ab865b4c4810ef83e08523f9e65fbdb288c908efab88359c907d1bc4a863cea61e413a3e2bc17bb01e735a5a4","name":"movement-rus-2 copy 2.png","type":"image/png","lastModified":1652819063439.075,"size":1529},{"id":"ef21553a321574994d4f6f5b08f640e8f693149954cc88d93f14c493540e97201d8834e0eeba540cc259d7da4fa072099e20510a23d4a7613340bb9cf4935ee6","href":"https://static.observableusercontent.com/files/ef21553a321574994d4f6f5b08f640e8f693149954cc88d93f14c493540e97201d8834e0eeba540cc259d7da4fa072099e20510a23d4a7613340bb9cf4935ee6","name":"lightrapchecked_megalopa-2@1.png","type":"image/png","lastModified":1654029508376.45,"size":15905},{"id":"6fdb831bc7f47542b3fbc9e5904ea91b6c0ce0cc3702727d05e597fa4191289ff2e07c2ce1751cc4f331ea94875cc5f0913235ea52bdb3946a21ecb1acc83b55","href":"https://static.observableusercontent.com/files/6fdb831bc7f47542b3fbc9e5904ea91b6c0ce0cc3702727d05e597fa4191289ff2e07c2ce1751cc4f331ea94875cc5f0913235ea52bdb3946a21ecb1acc83b55","name":"lightrapchecked_megalopa2 copy 2.png","type":"image/png","lastModified":1654200439350.745,"size":22898},{"id":"91cc0c14adfcc61e9c23b7b001743439612c374416e19cbaf9d10c57f6f2d82a6835c310b4e6cab1464d8b36b1a9d04cc065da9f85c5a79159e8e58711e7b78b","href":"https://static.observableusercontent.com/files/91cc0c14adfcc61e9c23b7b001743439612c374416e19cbaf9d10c57f6f2d82a6835c310b4e6cab1464d8b36b1a9d04cc065da9f85c5a79159e8e58711e7b78b","name":"lightrapchecked_megalopa2 copy 2@1.png","type":"image/png","lastModified":1654200572227.775,"size":21936}] 2e:{"title":"Sentinels of Change","cells":[{"id":0,"value":"md`# Sentinels of Change\n\nhttps://sentinels.hakai.org/\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4113,"value":"legendHtml = html`

\n \n

\n ${legend.map(\n (item) => html`

\n ${item.title}\n

`\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4280,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"viewof time1 = Scrubber(datesToPlot, {\n delay: 250,\n autoplay: false,\n loop: false,\n initial: datesToPlot.length - 1,\n format: (date) =>\n new Date(date).toLocaleString(\"en\", {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":4469,"value":"hexgeo","pinned":true,"hidden":false,"mode":"ojs"},{"id":4284,"value":"// updateMapbox = {\n// // This allows us to update the map with data without re-rendering the whole cell\n// // There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders\n// let fc = {\n// type: \"FeatureCollection\",\n// features: hexgeo\n// };\n// if (map._loaded) {\n// if (!map.getSource(\"hexbins\")) {\n// map.addSource(\"hexbins\", {\n// type: \"geojson\",\n// data: fc\n// });\n// } else {\n// // console.log(\"setting source\")\n// map.getSource(\"hexbins\").setData(fc);\n// }\n// if (map.getLayer(hexbinLayer.id)) {\n// map.removeLayer(hexbinLayer.id);\n// }\n// // console.log(\"adding layer\")\n// map.addLayer(hexbinLayer);\n// // map.flyTo(projection.invert([100,1000]))\n// // console.log(\"flying\")\n// // }\n// return true;\n// }\n// return false;\n// }\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4128,"value":"dateStr = timeFormat(new Date(time1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3739,"value":"hexbinLayer = {\n return {\n id: \"hexbins\",\n type: \"symbol\",\n source: \"hexbins\",\n layout: {\n \"icon-allow-overlap\": true,\n \"icon-image\": [\"get\", \"group\"],\n \"icon-size\": 0.2,\n \"icon-ignore-placement\": true\n },\n paint: {\n \"icon-opacity\": 0.82\n }\n\n // paint: {\n // // keep the circles the same size\n // // https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js\n // \"circle-radius\": {\n // stops: [\n // [0, 0],\n // [8.2, metersToPixelsAtMaxZoom(2, center[1])]\n // ],\n // base: 2\n // },\n // \"circle-stroke-color\": \"blue\",\n // \"circle-stroke-width\": [\"get\", \"stroke\"],\n // \"circle-color\": [\"get\", \"mhwcolor\"],\n // \"circle-opacity\": [\"get\", \"opacity\"]\n // }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3960,"value":"clickedSite = dataSentinels.filter((d) => d.Location === siteClicked)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3579,"value":"r = \"mapbox://styles/hakai/cl3afkjc5001914pnjkofmxjp\" //\"mapbox://styles/hakai/cl3afkjc5001914pnjkofmxjp\" //\"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on\" //\"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on\" //\"mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45\" //\"mapbox://styles/mapbox/dark-v10\" //mapbox://styles/hakai/ckwp8ahbx2u0w15o5zwx3odtn\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3587,"value":"hexgeo = hex.map((d, i) => {\n let sel = {};\n // if (selected && selected[0]) {\n // sel = selected[0];\n // }\n return {\n id: i,\n properties: {\n ...d,\n stroke: d.lat == sel.lat && d.lng == sel.lng ? 2 : 0,\n mhwcolor:\n d.collected === true ? (d.total > 0 ? \"#5ec962\" : \"#fde725\") : \"grey\",\n opacity: 0.89\n },\n geometry: { type: \"Point\", coordinates: [d.lng, d.lat] },\n type: \"Feature\"\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3470,"value":"Inputs.table(dataSentinels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3443,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3441,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3435,"value":"bc = topojson.feature(bc_coastline, bc_coastline.objects.LandLowResBC)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1511,"value":"// ind = dates.indexOf(time1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1664,"value":"datesCopy = [...dates]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2202,"value":"today = d3.timeDay.offset(d3.utcDay(new Date(\"2022-01-26\")), -1) //d3.utcDay() //","pinned":true,"hidden":false,"mode":"ojs"},{"id":2246,"value":"start = d3.timeDay.offset(today, -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1932,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2958,"value":"datesToPlot = datesCopy","pinned":true,"hidden":false,"mode":"ojs"},{"id":2952,"value":"// colorView = \"anomaly\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3437,"value":"bc_coastline = d3.json(\n \"https://gist.githubusercontent.com/Mbrownshoes/8de4d361ff36ae7cebdaa87777e9c254/raw/29198e2426a738a68f72dd1195dd43919000246f/BC_Alaska.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"mutable firstLoad = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"mutable siteClicked = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":3122,"value":"metersToPixelsAtMaxZoom = (meters, latitude) =>\n meters / 0.075 / Math.cos((latitude * Math.PI) / 180)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1521,"value":"Code for globe","pinned":false,"hidden":false,"mode":"md"},{"id":1339,"value":"Buoy plot","pinned":false,"hidden":false,"mode":"md"},{"id":2926,"value":"urlData = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSaZgKJoGSU7-ERYWCbtjuRZQxqKZ9AyPq4nkpiX3z_jwptf3-AbwpANhssfY3xL0H_IfkyKpOcLrql/pub?gid=473834616&single=true&output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3786,"value":"viewof table = Inputs.table(dataSentinels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4012,"value":"dataSentinels[0][\"Number of Instars\"] + 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":4110,"value":"legend = {\n const groupsVisible = groupsData.filter((item) => item.group !== 10);\n const promises = groupsVisible.map(async (item) => ({\n ...item,\n iconUrl: await item.file.url()\n }));\n const items = Promise.all(promises);\n return items;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4495,"value":"await d3.csv(urlData, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4207,"value":"dataSentinels.filter((d) => d.Location === \"Winter Cove\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2929,"value":"dataSentinels = {\n const data = await d3.csv(urlData, d3.autoType);\n data.forEach(\n (d) => {\n let site = sites.find((s) => s.Location === d.Location);\n if (site) {\n (d.Lat = site.Latitude), (d.Long = site.Longitude);\n }\n d.total = d[\"Number of Megalopae\"] + d[\"Number of Instars\"];\n\n d.count = d.total;\n d.Date = new Date(d.Date);\n }\n // d.status =\n );\n return data.filter((d) => d[\"Submission ID\"] > 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4324,"value":"d3.csv(urlData, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2917,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSaZgKJoGSU7-ERYWCbtjuRZQxqKZ9AyPq4nkpiX3z_jwptf3-AbwpANhssfY3xL0H_IfkyKpOcLrql/pub?gid=229245235&single=true&output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2919,"value":"sites = d3.csv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4335,"value":"new Date(\n sites[4][\"Date of first Dungeness megalopae/instars\"]\n).toLocaleString(undefined, {\n timeZone: \"utc\",\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1497,"value":"// selected = hexbyLocation.get(\n// map.selected ? map.selected.data.lng + \"|\" + map.selected.data.lat : \"\"\n// ) || []\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"hexbyLocation = d3.group(hex, (d) => d.lng + \"|\" + d.lat)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1388,"value":"CollectionsForLastThreeDays = dataSentinels.filter(\n (d) =>\n // get three day old data. There can be multiple days for a site\n new Date(d.Date).toISOString().substring(0, 10) <=\n new Date(time1).toISOString().substring(0, 10) &&\n new Date(d.Date).toISOString().substring(0, 10) >=\n new Date(d3.timeDay.offset(new Date(time1), -3))\n .toISOString()\n .substring(0, 10)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"hex = {\n const data = [];\n for (let i = 0; i < sites.length; i++) {\n data.push({\n Location: sites[i].Location,\n Organization: sites[i][\"Partner Organizations\"],\n lat: sites[i].Latitude,\n lng: sites[i].Longitude,\n total: 0,\n collected: false,\n group: 1,\n // category: \"none\",\n firstCatch: sites[i][\"Date of first Dungeness megalopae/instars\"],\n totalTODate:\n sites[i][\n \"Total number of Dungeness recorded to date (megalopae and instars)\"\n ],\n day: new Date(time1)\n });\n }\n // replace categories with real value\n if (CollectionsForLastThreeDays.length > 0) {\n data.forEach((d) => {\n let isData = CollectionsForLastThreeDays.filter(\n (h) => h.Location === d.Location\n );\n console.log(isData);\n if (isData.length > 0) {\n d.collected = true;\n\n d.total = d3.sum(isData, (d) => d.total);\n d.group = d.total > 0 ? 3 : 2;\n }\n });\n }\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"dates = d3.timeDay\n .range(\n d3.timeDay.offset(new Date(dateExtent[0]), -1),\n d3.timeDay.offset(new Date(dateExtent[1]), 1)\n )\n .map((d) => +d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"dateExtent = d3.extent(dataSentinels, (d) => new Date(d.Date)) //d3.extent(HWStatus, (d) => new Date(d.date_start1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"center = projection.invert([width/2, height/2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"// map._loaded","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"// map.getSource(\"hexbins\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"originalScale = 25355.18980109889","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"scaleRatio = projection.scale() / originalScale","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"widthRatio = width / 955","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"heightRatio = height / 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"projection = d3\n .geoAlbers()\n .rotate([126, 0])\n .fitSize(\n [width, height],\n topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"pixelRadius = 100 * scaleRatio * d3.min([widthRatio, heightRatio])","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"hexbin = d3\n .hexbin()\n .extent([\n [0, 0],\n [width, height]\n ])\n .radius(100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"numOfDates = d3.timeDay.count(...dateExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"numFormat = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"timeFormat = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"// import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"import { BC_Midres } from \"@mbrownshoes/how-i-start-maps-in-d3\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6.0.0-rc.3\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY20wbXh4emprMDc3cjJrcTI5czI3cXRjbCJ9.XNfWqelIzmfMTVRJlc7nIg\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2331,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2786,"value":"alldates = d3.timeMonth\n .range(new Date(dateExtent[0]), new Date(dateExtent[1]))\n .map((d) => d.toISOString().substring(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1644,"value":"import { SpikeMap } from \"@d3/spike-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3574,"value":"groupsData = [\n {\n title: \"No recent data\",\n icon: \"trap-not-checked\",\n group: 1,\n file: FileAttachment(\"notchecked@1.png\")\n },\n {\n title: \"Checked within past 3 days\",\n icon: \"trap-checked\",\n group: 2,\n file: FileAttachment(\"lighttrapchecked@1.png\")\n },\n {\n title: \"Dungeness caught within past 3 days\",\n icon: \"crabs-found\",\n group: 3,\n file: FileAttachment(\"lightrapchecked_megalopa2 copy 2-1 (2).png\")\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3640,"value":"movementRus21 = FileAttachment(\"lightrapchecked_megalopa2 copy 2-1 (2).png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4120,"value":"FileAttachment(\"lighttrapchecked@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4476,"value":"FileAttachment(\"notchecked@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}