31:T603,annum = { return d3 .select( Plot.plot({ width: width, height: 100 + width / 10, x: { padding: 0, domain: [0, 365], ticks: [30, 120, 210, 300], tickFormat: (t) => ({ 30: "Winter", 120: "Spring", 210: "Summer", 300: "Fall" }[t]), tickSize: 0 }, marks: [ Plot.line( speciesFilteredData, Plot.binX( { y: "count" }, { x: "day", z: "year", stroke: "grey" } ) ), Plot.text( speciesFilteredData, Plot.selectLast({ x: "day", y: "count", z: "year", text: "year", textAnchor: "start", dx: 3 }) ) ] }) ) .call((g) => g .append("line") .attr("id", "dateline") .style("stroke", "#f90") .attr("x1", 50) .attr("x2", 50) .attr("y1", 20) .attr("y2", 70 + width / 10) .attr("stroke", "black") ) .call((g) => g .append("text") .attr("id", "yTitle") .attr("dx", 22) .attr("dy", 100 + width / 10 - 15) .text("/day") ) .call((g) => g.append("g").call(() => { // TODO //d3.brushX().on("end", (b) => { //console.log(b); }) ) .node(); }32:T564,hexagonLayer = { const yearQuarter = Math.ceil(((playback + 0.1) * 4) / 365); const bin = [playback - rollingBin / 2, playback + rollingBin / 2]; const wideBin = [-730, 730]; const layer = new deck.ScatterplotLayer({ id: "observations", data: speciesFilteredData, getPosition: (d) => d.position, radiusScale: 1000, radiusMinPixels: 2, radiusMaxPixels: 8, getFillColor: [113, 166, 210, 105], pickable: pickingEnabled, onClick: ({ object }, e) => { if (!isMobile && object?.id) { window.open( "https://www.inaturalist.org/observations/" + object.id, "_blank" ); } else if (object?.id) { var tooltip = e.target.nextElementSibling; tooltip.style.pointerEvents = "auto"; setTimeout(() => { tooltip.pointerEvents = "none"; }, 1000); } }, getFilterValue: (d) => [ d.day > 182 ? d.day - 365 : d.day, d.day, d.day < 183 ? d.day + 365 : d.day ], filterRange: [ // I wish filters could be OR yearQuarter === 1 ? bin : wideBin, yearQuarter > 1 && yearQuarter < 4 ? bin : wideBin, yearQuarter === 4 ? bin : wideBin ], filterEnabled: !disableTimeFiltering, extensions: [new deck.DataFilterExtension({ filterSize: 3 })] }); deckgl.setProps({ layers: [layer] }); return layer; }33:T421,deckgl = new deck.DeckGL({ container, map: mapboxgl, mapStyle: "mapbox://styles/mapbox/dark-v10", mapboxApiAccessToken: "pk.eyJ1Ijoibm90YW5hY2NlbnQiLCJhIjoiY2t0Mmo1eHA3MG56czJ2bnhoMXZuaW90eSJ9.ZdhdFl2eNpoHPcw1V_e6Kw", initialViewState: { longitude: +getQueryParam("lng") ? +getQueryParam("lng") : -124, latitude: +getQueryParam("lat") ? +getQueryParam("lat") : 53.5, zoom: +getQueryParam("zoom") ? +getQueryParam("zoom") : 3 + width ** 0.5 / 20, minZoom: 3, maxZoom: 15, pitch: 45 }, onViewStateChange: ({ viewState, interactionState }) => { interactionState.isZooming && viewState.zoom > 10 != mutable pickingEnabled && (mutable pickingEnabled = viewState.zoom > 10); }, controller: true, getCursor: (e) => (e.isHovering ? "pointer" : "grab"), getTooltip: ({ object }) => object && { html: `

${object.species.split(",").reverse().join(" (") + ")"}

` } })34:[{"id":"17a69ea2b3bc0af0d2faf8bcaca0c114d40542193d4a7e5388cf6e25064a5e8ddc02b8f30d218f596248d663224c29bf1638df2689eedd081297783f35f76ad4","href":"https://static.observableusercontent.com/files/17a69ea2b3bc0af0d2faf8bcaca0c114d40542193d4a7e5388cf6e25064a5e8ddc02b8f30d218f596248d663224c29bf1638df2689eedd081297783f35f76ad4","name":"insects@3.json","type":"application/json","lastModified":1631182255017.637,"size":3129554},{"id":"004ba22c8267cbc5bfef525ce2ee7e7e2fe79eb079233bcc0653f6089d262397811db127dbf614bc90ec54ce158b442a88d9152dcaebeec32f3fcbb53d21216e","href":"https://static.observableusercontent.com/files/004ba22c8267cbc5bfef525ce2ee7e7e2fe79eb079233bcc0653f6089d262397811db127dbf614bc90ec54ce158b442a88d9152dcaebeec32f3fcbb53d21216e","name":"mammals@3.json","type":"application/json","lastModified":1631182259887.814,"size":569087},{"id":"223ffaf101abc82c3e3302fa71e765b193d915521bb1e861b18da1b2d0777d52d1deb62f4f9fef76e37e3e36110768ced102b9ec0d432989a1f0f4dc94cb5cc9","href":"https://static.observableusercontent.com/files/223ffaf101abc82c3e3302fa71e765b193d915521bb1e861b18da1b2d0777d52d1deb62f4f9fef76e37e3e36110768ced102b9ec0d432989a1f0f4dc94cb5cc9","name":"bc_parks.json","type":"application/json","lastModified":1631182283783.636,"size":1592096},{"id":"d80b972ba3c4cfa7e16e13917e2a3a357c6c6d732c342ac7ca8ae0d53883fb5d5d94888bc77b36de2173614ffb89278c553f9ef5e0ba2774785bfcb0b2c3a963","href":"https://static.observableusercontent.com/files/d80b972ba3c4cfa7e16e13917e2a3a357c6c6d732c342ac7ca8ae0d53883fb5d5d94888bc77b36de2173614ffb89278c553f9ef5e0ba2774785bfcb0b2c3a963","name":"birds@3.json","type":"application/json","lastModified":1631182271577.254,"size":3090988}] 2f:{"title":"iNaturalist Phenology","cells":[{"id":0,"value":"md`# iNaturalist Phenology\nA decade of [iNaturalist](https://www.inaturalist.org/) Observations in BC`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof playback = Scrubber(\n //https://observablehq.com/@mbostock/scrubber\n Array.from({ length: 365 }, (_, i) => i),\n {\n initial: +getQueryParam(\"day\") ? +getQueryParam(\"day\") : 0,\n autoplay: +getQueryParam(\"pause\") ? !+getQueryParam(\"pause\") : true,\n delay: 16,\n format: (day) =>\n new Date(2030, 0, day + 1).toLocaleString(\"en\", {\n month: \"long\",\n day: \"numeric\"\n })\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2588,"value":"viewof disableTimeFiltering = Inputs.toggle({\n label: \"Show All Time\",\n value: +getQueryParam(\"all\") ? +getQueryParam(\"all\") : false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof rollingBin = Inputs.range([1, 180], {\n value: +getQueryParam(\"bin\") ? +getQueryParam(\"bin\") : 90,\n step: 1,\n label: \"Rolling Bin (days)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"viewof dataset = Inputs.select([\"Birds\", \"Mammals\", \"Insects\", \"BC Parks\"], {\n label: \"Dataset\",\n value:\n getQueryParam(\"dataset\")?.length > 2 ? getQueryParam(\"dataset\").replace(\"-\",\" \") : \"Mammals\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"viewof speciesFilter = {\n const input = Inputs.search(source.meta2.species.lut, {\n label: \"Species\",\n query: getQueryParam(\"species\") ? getQueryParam(\"species\") : \"\"\n });\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"html`

${speciesFilter.join(\"; \")}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2643,"value":"{\n function getLink() {\n return `https://observablehq.com/@notanaccent/inaturalist-phenology?dataset=${viewof dataset.value.replace(\n \" \",\n \"-\"\n )}&species=${viewof speciesFilter.input.value}&bin=${\n viewof rollingBin.value\n }&day=${viewof playback.value}&lat=${deckgl.viewState[\n \"default-view\"\n ].latitude.toFixed(4)}&lng=${deckgl.viewState[\n \"default-view\"\n ].longitude.toFixed(4)}&all=${+viewof disableTimeFiltering\n .value}&zoom=${deckgl.viewState[\"default-view\"].zoom.toFixed(2)}&pause=1`;\n }\n\n const linkHolder = html`

`;\n return html`

${Inputs.button([\n [\n \"Get Link\",\n () => {\n const link = getLink();\n linkHolder.innerHTML = `${link}`;\n }\n ]\n ])}${linkHolder}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`\n

${md`\nObservations in British Columbia from Sep 2011 through Aug 2021\n\n> Data source: [iNaturalist](https://www.inaturalist.org/)\n\n> Visualization: [deck.gl](https://deck.gl/)\n\n> Map: [Mapbox GL JS](https://www.mapbox.com/mapbox-gljs)\n\n> Plot: [Observable Plot](https://observablehq.com/@observablehq/plot)\n\n> Compression: [Bit Bunching](https://observablehq.com/@notanaccent/tiny-data-encoding)\n\n> Similar:\n>>* ${[\n \"https://observablehq.com/@natbat/develop-your-naturalist-superpowers-with-observable-note\",\n \"https://observablehq.com/@tophtucker/nudibranch-sightings\",\n \"https://observablehq.com/@natbat/develop-your-naturalist-superpowers-with-observable-note\",\n \"https://observablehq.com/@kieich/d3-data-joining\",\n \"https://observablehq.com/@blishten/gbif-api\"\n]\n .map((s) => s.match(/@([^\\/]+)[\\/](.+)/))\n .map((m) => `@${m[1]}: ${m[2]}`)\n .join(\"\\n>>* \")}`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"source = ({\n Birds: FileAttachment(\"birds@3.json\"),\n Mammals: FileAttachment(\"mammals@3.json\"),\n Insects: FileAttachment(\"insects@3.json\"),\n \"BC Parks\": FileAttachment(\"bc_parks.json\")\n}[dataset]\n .json()\n .then((pack) => {\n pack.meta2 = Object.fromEntries(pack.meta.map((m) => [m.field, m]));\n return pack;\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"data = eval(source.decompress)(source).then((d) =>\n d.map(({ id, time_observed_at, longitude, latitude, species }) => {\n const date = new Date(time_observed_at);\n return {\n id,\n day: (date - new Date(date.getFullYear() + \"\")) / 24 / 60 / 60 / 1000,\n year: date.getFullYear(),\n position: [longitude, latitude],\n species\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2881,"value":"md`### Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"{\n const x = (playback * (width - 75)) / 365 + 40;\n d3.select(annum).select(\"#dateline\").attr(\"x1\", x).attr(\"x2\", x);\n return md`dateline animation:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2443,"value":"speciesFilteredData = data.filter((d) => speciesFilter.indexOf(d.species) >= 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2965,"value":" mutable pickingEnabled =false","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2888,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"mapboxgl = require(\"mapbox-gl@2.4.1/dist/mapbox-gl.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html`\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"deck = require.alias({\n // optional dependencjei\n h3: {},\n s2Geometry: {}\n})(\"deck.gl@~8.5.5/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"getQueryParam = (name) => new URL(location.href).searchParams.get(name)\n// from https://observablehq.com/@maddievision/get-query-params","pinned":false,"hidden":false,"mode":"ojs"},{"id":3112,"value":"import { isMobile } from \"@flimsyhat/mobile-device-check\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}