I want to help more people experience the excitement of exploring Earth's subsurface
Published
Edited
Oct 4, 2019
2 forks
20 stars
url = (z, x, y, t) =>
endpoint
.replace(/{Time}/, t)
.replace(/{TileMatrixSet}/, "GoogleMapsCompatible_Level9")
.replace(/{TileMatrix}/, z)
.replace(/{TileRow}/, y)
.replace(/{TileCol}/, x)
cache = tileRack.initRasterCache(tileSize, url) // Use tileRack's default raster tile factory
function dayDifference(dashString) {
let test = new Date(dashString);
let base = new Date(dashFormat(selectedDate.date));
return base < test
? d3.timeDay.count(base, test)
: d3.timeDay.count(test, base);
}
hdist = getTileMetric(tileset)
function metric(tile) {
let deltas = hdist(tile);
let dzFac = -1.0 + 1.0 / 2 ** deltas.dz;
return Math.max(deltas.dx, deltas.dy) + dzFac + dayDifference(tile.t);
}
numCachedTiles = cache.trim(metric, 1.5)
function drawTiles(ctx) {
ctx.clearRect(0, 0, width, mapHeight);
// Get the current and neighboring times
let current = dashFormat(selectedDate.date);
let prev = dashFormat(d3.timeDay.offset(selectedDate.date, -1));
let next = dashFormat(d3.timeDay.offset(selectedDate.date, 1));
for (const [x, y, z] of tileset) {
const [xw, yw, zw] = d3.tileWrap([x, y, z]);
// Get tile for selected date, and draw it if available
let tileBox = cache.retrieve([zw, xw, yw, current]);
let tx = tileset.translate[0];
let ty = tileset.translate[1];
if (tileBox) drawTileBox(ctx, tileBox, x + tx, y + ty, tileset.scale);
// Pre-load tiles for adjacent dates
cache.retrieve([zw, xw, yw, prev]);
cache.retrieve([zw, xw, yw, next]);
}
}
animate = {
while (true) yield drawTiles(mapContext);
}
tiler = d3
.tile()
.tileSize(tileSize)
.size([width, mapHeight])
.clampX(false) // Allow panning across longitude 180 degrees
tileset = tiler(transform)
projection = d3
.geoMercator()
.center([-77, 26.5])
.scale(Math.pow(2, 13) / (2 * Math.PI))
.translate([width / 2, mapHeight / 2])
mutable transform = d3.zoomIdentity
.translate(projection([0, 0])[0], projection([0, 0])[1])
.scale(projection.scale() * 2 * Math.PI)
zoom = d3
.zoom()
.scaleExtent([1 << 10, 1 << 17])
.extent([[0, 0], [width, mapHeight]])
.translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])
.on("zoom", () => {
mutable transform = d3.event.transform;
})
d3
.select(mapContext.canvas)
.call(zoom)
.call(zoom.transform, mutable transform)
dashFormat = d3.timeFormat("%Y-%m-%d")
axisStyle // Importing it doesn't activate it?
tileRack = import("tile-rack@0.2.0")
d3 = require("d3@5", "d3-geo@1", "d3-tile@1")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.