The avatar for @justingosses
Justin Gosses
JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT | Learn, Build Stuff, and Figure Things Out
Published
NASA (mostly forks so go to original)
Edited
Oct 4, 2019
Fork of Mapping Across Time
NASA (mostly forks so go to original)
Exploration of NASA Acronyms with Multiple MeaningsCode.nasa.gov Data ExplorationsUntitledUntitledQuick Exploration of a selected subset of the DATA.NASA.GOV's data.json file. Not all the metadata but a selection so people can understand the fields that exist in the data schema.UntitledUntitledComparing human-generated vs. A.I.-generated keyword tags on Code.nasa.govFind Labor Hours To Generate OpenSouce NASA Code Since A Selected DateNASA's Open-Source Code Projects: NLP Generated Tags ClusterStars and constellations IIExoplanetsPublic Engagement with NASA's Open-Source Code Projects on Github
Mapping Across Time
Finding Recent Additions to Code.nasa.govVisitors to .gov websites via API from analytics.usa.gov. NASA examplesLicenses of Open-Source NASA code projects on code.govNASA's Open-Source Code ProjectsMeteorite landingsUntitledPhases of the MoonInverted Nasa PhotosAsteroids API <a href="https://api.nasa.gov/api#neows-swagger">(N.E.O.)</a> ExplorationNASA Api ExplorerGithub Api ExplorerColor Rendering of SpectraMeteorite landingsGlobal Temperature TrendsWorking with data from transcriptsWorld Population Line GraphsGeometric Algebra Solar System SimulationList of Agencies using NOSA License in Projects on code.govGlobal surface temperature changeGISTEMP nos enseña sobre el calentamiento globalRe: “Can Moons Have Moons?”Distance to shoreEPIC “Blue Marble” BrowserRequest PlaygroundAnálisis de temperatura de superficie GISS (GISTEMP)Global Temperature TrendsNight Skies — Lights and Light Pollution WebGL GlobeSatellite ground track visualizerPt. 2 Can sound add value to data visualizations?
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
url = (z, x, y, t) =>
endpoint
.replace(/{Time}/, t)
.replace(/{TileMatrixSet}/, "GoogleMapsCompatible_Level9")
.replace(/{TileMatrix}/, z)
.replace(/{TileRow}/, y)
.replace(/{TileCol}/, x)
Insert cell
cache = tileRack.initRasterCache(tileSize, url) // Use tileRack's default raster tile factory
Insert cell
Insert cell
Insert cell
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);
}
Insert cell
Insert cell
hdist = getTileMetric(tileset)
Insert cell
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);
}
Insert cell
numCachedTiles = cache.trim(metric, 1.5)
Insert cell
Insert cell
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]);
}
}
Insert cell
animate = {
while (true) yield drawTiles(mapContext);
}
Insert cell
Insert cell
Insert cell
tiler = d3
.tile()
.tileSize(tileSize)
.size([width, mapHeight])
.clampX(false) // Allow panning across longitude 180 degrees
Insert cell
tileset = tiler(transform)
Insert cell
projection = d3
.geoMercator()
.center([-77, 26.5])
.scale(Math.pow(2, 13) / (2 * Math.PI))
.translate([width / 2, mapHeight / 2])
Insert cell
mutable transform = d3.zoomIdentity
.translate(projection([0, 0])[0], projection([0, 0])[1])
.scale(projection.scale() * 2 * Math.PI)
Insert cell
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;
})
Insert cell
d3
.select(mapContext.canvas)
.call(zoom)
.call(zoom.transform, mutable transform)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dashFormat = d3.timeFormat("%Y-%m-%d")
Insert cell
axisStyle // Importing it doesn't activate it?
Insert cell
Insert cell
Insert cell
Insert cell
tileRack = import("tile-rack@0.2.0")
Insert cell
d3 = require("d3@5", "d3-geo@1", "d3-tile@1")
Insert cell

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.
Learn more