2022 30-day Map Challenge • Day 01 • Maine CWOP Weather Station Locations2022 30-day Map Challenge • Day 02 • Lines of Sedition2022 30-day Map Challenge • Day 03 •👀⚠🚨 Polygons2022 30-day Map Challenge • Day 04 • Green 💨 🌞 Energy2022 30-day Map Challenge • Day 05 •🇺🇦 (Refugees)2022 30-day Map Challenge • Day 06 • Network • ⚡️ Central Maine Power 3 Phase Circuit Network2022 30-day Map Challenge • Day 07 • Raster • 🥵 US Daily tmax2022 30-day Map Challenge • Day 08 • Data: OpenSreetMap • 🎲🎲 OSM Tile Roulette2022 30-day Map Challenge • Day 10 • 😒 Bad Maps2022 30-day Map Challenge • Day 11 • 🦞 Red2022 30-day Map Challenge • Day 12 • Scale • 🛬 International Tourism: Arrivals2022 30-day Map Challenge • Day 13 • 5-Minute Map • Starbucks Workers United2022 30-day Map Challenge • Day 14 • Hexagons • ⬢⬢ U.S. House Clown Show2022 30-day Map Challenge • Day 15 • Food/drink • The 🌾 Insecure States of 🇺🇸2022 30-day Map Challenge • Day 16 • Minimal • The Under 🌊 Cables That Define Us2022 30-day Map Challenge • Day 17 • A Map Without A Computer • 🧝🏽♀️ Middle Earthcadia2022 30-day Map Challenge • Day 18 • Blue • Global 🫐 Production2022 30-day Map Challenge • Day 19 • Globe • 🌎🔊 Earthquakes2022 30-day Map Challenge • Day 20 • My favourite…place! ⛰️ MDI/Acadia National Park2022 30-day Map Challenge • Day 21 • 👨👩👧👦 Kontour Population Dataset2022 30-day Map Challenge • Day 22 • NULL • 🏝️ Null Island2022 30-day Map Challenge • Day 23 • Migration • 🚶🏼🚷 U.S. Southern Border Encounters2022 30-day Map Challenge • Day 24 • Fantasy • 🚀 The Expanse: Eros Station Tube Map2022 30-day Map Challenge • Day 25 • 🟥🟦 Colour Friday: 2 Colors Maine's Main & Secondary Roads2022 30-day Map Challenge • Day 26 • Island • 🏝️ ☠️ Procedurally Generated Island Getaway2022 30-day Map Challenge • Day 27 • 🎶 Music • LIVE! Maine Radio Station Genres 🔊2022 30-day Map Challenge • Day 28 • 3D • 🛰️ Geosynchronous Satellites 🌎
2022 30-day Map Challenge • Day 09 • Space • 🚀 Mars Junk
{
// Square container that's also responsive
const containerWidth = width;
const containerHeight = width;
const container = html`<div style="height:${containerHeight}"></div>`;
var world = Globe()
.globeImageUrl(`https://solartextures.b-cdn.net/${resolution}_mars.jpg`) // grab the texture
.pointsData(marsJunk) // tag our data file
.pointAltitude(60 * 6e-4) // just far enough to see
.pointColor(() => "#ffffaa")
.pointRadius(0.5) // just wide enough to see
.labelsData(marsJunk)
.labelText("object") // Schiaparelli EDM & Opportunity Rover "overlap" so I cheated and just deleted one of the object names in the table to save me some headache here
.labelAltitude(110 * 6e-4) // a bit higher than the columns
.labelColor(() => "#ffffaa")
.labelSize(1.5) // should be enough to see
.width(containerWidth)
.height(containerHeight)(container);
// this is to help y'all get seasick
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.6;
yield container; // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield
}
mars-junk@5.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
THREE = {
const THREE = (window.THREE =
await require("three@0.130.0/build/three.min.js"));
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return THREE;
}
Globe = require("globe.gl")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
