30:[] 2e:{"title":"Mapping Across Time","cells":[{"id":0,"value":"md`# Mapping Across Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`NASA's [Global Imagery Browse Services (GIBS)](https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs) provides a wide range of satellite imagery. It is updated daily, and has a [well-documented API](https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+API+for+Developers).\n\nHere is a basic slippy map showing \"true-color\" corrected reflectance from the [VIIRS sensor](https://en.wikipedia.org/wiki/Visible_Infrared_Imaging_Radiometer_Suite) on the [Suomi NPP satellite](https://en.wikipedia.org/wiki/Suomi_NPP). The starting map centers on the Bahamas as [Hurricane Dorian](https://en.wikipedia.org/wiki/Hurricane_Dorian) came ashore. Try moving backward and forward in time to watch the hurricane's path!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"{\n const form = html``;\n form.minus.onclick = () => selectedDate.increment(-1);\n form.plus.onclick = () => selectedDate.increment(1);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"viewof selectedDate = buildDateSelector({\n firstDay: new Date(2015, 10, 24),\n lastDay: d3.timeDay.offset(new Date(), -1),\n initialSelection: new Date(2019, 8, 1),\n margins: margin,\n height: 60,\n maxZoom: 10,\n initZoom: 10,\n initTranslate: (margin.left + margin.right - width) * 9 // Start at right end of scale\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof mapContext = {\n const context = DOM.context2d(width, mapHeight);\n context.canvas.value = context;\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"md`Panning and zooming are enabled by [d3-zoom](https://github.com/d3/d3-zoom), and the zoomable timeline comes from [Sliding Timeline Selector](https://observablehq.com/@jjhembd/sliding-timeline-selector).\n\nOf course, NASA's own [Worldview](https://worldview.earthdata.nasa.gov/) already provides this functionality, and much more. This notebook is really an attempt to understand how to handle a 4-dimensional cache, with pre-loading of adjacent tiles. The cache enables smooth transitions in all directions: x, y, zoom, and time!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Setting up the tile cache\n[tile-rack](https://www.npmjs.com/package/tile-rack) v0.2.0 accepts an arbitrary-length coordinates array for tile requests via the .retrieve method. Note that the first three coordinates MUST be z, x, y--these are used for computing the coordinates of a parent tile. Any additional coordinates will be passed along to the tile factory.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"url = (z, x, y, t) =>\n endpoint\n .replace(/{Time}/, t)\n .replace(/{TileMatrixSet}/, \"GoogleMapsCompatible_Level9\")\n .replace(/{TileMatrix}/, z)\n .replace(/{TileRow}/, y)\n .replace(/{TileCol}/, x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"cache = tileRack.initRasterCache(tileSize, url) // Use tileRack's default raster tile factory","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`## Managing cache size\nTiles \"far\" from the current view should be discarded from the cache, to avoid filling up the user's RAM. In this case, \"far\" needs to be defined in 4 dimensions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`Time zones make the time dimension a bit tricky. The interactive time scale selector returns dates at T00:00 (**local time**), while constructing a date from the 'YYYY-MM-DD' string on the tile returns a date at Z00:00 (**[Zulu time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time)**). The following day difference calculator forces everything to Z00:00 for fair comparisons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"function dayDifference(dashString) {\n let test = new Date(dashString);\n let base = new Date(dashFormat(selectedDate.date));\n return base < test\n ? d3.timeDay.count(base, test)\n : d3.timeDay.count(test, base);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`The time difference is combined with the spatial tile metric from [Tile Cache Pruning](https://observablehq.com/@jjhembd/tile-cache-pruning), and passed along to [tile-rack](https://www.npmjs.com/package/tile-rack)'s .trim method.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"hdist = getTileMetric(tileset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"function metric(tile) {\n let deltas = hdist(tile);\n let dzFac = -1.0 + 1.0 / 2 ** deltas.dz;\n return Math.max(deltas.dx, deltas.dy) + dzFac + dayDifference(tile.t);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"numCachedTiles = cache.trim(metric, 1.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`## Pre-loading tiles for neighboring dates\nThe cache loads new tiles from the API (if they are not already in memory) when they are requested via the .retrieve method. Along with the requested [z, y, x] tile, it also loads the larger *parent* tiles. This automatically provides some buffer in the spatial directions. \n\nTo ensure a buffer in the time direction, this modified drawTiles function first draws the selected date, and then requests the equivalent tiles for one day earlier and later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"function drawTiles(ctx) {\n ctx.clearRect(0, 0, width, mapHeight);\n\n // Get the current and neighboring times\n let current = dashFormat(selectedDate.date);\n let prev = dashFormat(d3.timeDay.offset(selectedDate.date, -1));\n let next = dashFormat(d3.timeDay.offset(selectedDate.date, 1));\n\n for (const [x, y, z] of tileset) {\n const [xw, yw, zw] = d3.tileWrap([x, y, z]);\n\n // Get tile for selected date, and draw it if available\n let tileBox = cache.retrieve([zw, xw, yw, current]);\n let tx = tileset.translate[0];\n let ty = tileset.translate[1];\n if (tileBox) drawTileBox(ctx, tileBox, x + tx, y + ty, tileset.scale);\n\n // Pre-load tiles for adjacent dates\n cache.retrieve([zw, xw, yw, prev]);\n cache.retrieve([zw, xw, yw, next]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"animate = {\n while (true) yield drawTiles(mapContext);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`## Acknowledgement\nWe acknowledge the use of imagery provided by services from NASA's Global Imagery Browse Services (GIBS), part of NASA's Earth Observing System Data and Information System (EOSDIS).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`---\n## Appendix 1: Tile layout management\nFor explanation of this section, see [Zoomable Map with Tile Cache](https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"tiler = d3\n .tile()\n .tileSize(tileSize)\n .size([width, mapHeight])\n .clampX(false) // Allow panning across longitude 180 degrees","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"tileset = tiler(transform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"projection = d3\n .geoMercator()\n .center([-77, 26.5])\n .scale(Math.pow(2, 13) / (2 * Math.PI))\n .translate([width / 2, mapHeight / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"mutable transform = d3.zoomIdentity\n .translate(projection([0, 0])[0], projection([0, 0])[1])\n .scale(projection.scale() * 2 * Math.PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"zoom = d3\n .zoom()\n .scaleExtent([1 << 10, 1 << 17])\n .extent([[0, 0], [width, mapHeight]])\n .translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])\n .on(\"zoom\", () => {\n mutable transform = d3.event.transform;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"d3\n .select(mapContext.canvas)\n .call(zoom)\n .call(zoom.transform, mutable transform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Appendix 2: Imports and miscellaneous constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"endpoint = \"https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"margin = ({\n top: 0,\n right: 5,\n bottom: 0,\n left: 0,\n leftpad: 200,\n rightpad: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"mapHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"tileSize = 256","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"dashFormat = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"axisStyle // Importing it doesn't activate it?","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {\n buildDateSelector,\n axisStyle\n} from \"@jjhembd/sliding-timeline-selector\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"import { getTileMetric } from \"@jjhembd/tile-cache-pruning\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"import { drawTileBox } from \"@jjhembd/zoomable-map-with-tile-cache\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"tileRack = import(\"tile-rack@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}