3e:null 3f:["$","title",null,{"children":"Timezone Mapping | Kallol Chatterjee | Observable"}] 45:T2423,viewof location = { // CONFIGURATION // ========================================================================== // Layout const mapWidth = width; // Default Location (Denver, CO, USA) const defaultLongitude = -104.99; const defaultLatitude = 39.74; const defaultTimezone = "UTC-07:00"; // Styling const styles = { ocean: { color: "#D1E3EB", opacity: 1 }, land: { color: "#FCF8E5", opacity: 1 }, graticule: { color: "#000", opacity: 0.07 }, timezone: { color: "red", opacity: 0.2 }, userLocation: { color: "red", radius: 4, blendMode: "multiply" }, outline: { color: "#000", width: 1 } }; // PROJECTION SETUP // ========================================================================== const projection = d3.geoNaturalEarth1(); const path = d3.geoPath(projection); const outline = { type: "Sphere" }; // Calculate dimensions based on projection const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(mapWidth, outline)).bounds(outline); const dy = Math.ceil(y1 - y0); const l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); const height = dy; // DATA PROCESSING // ========================================================================== const zones = topojson.feature(timezones, timezones.objects.timezones).features; const landData = land; const graticule = d3.geoGraticule().stepMinor([15, 10])(); // Build sorted timezone list const timezoneList = Array.from(new Set(zones.map(z => z.properties.time_zone))) .sort((a, b) => { const extractOffset = (tz) => { const match = tz.match(/UTC([+-])(\d+):(\d+)/); if (!match) return 0; const sign = match[1] === '+' ? 1 : -1; return sign * (parseInt(match[2]) + parseInt(match[3]) / 60); }; return extractOffset(a) - extractOffset(b); }); // STATE // ========================================================================== let currentLongitude = defaultLongitude; let currentLatitude = defaultLatitude; let currentTimezone = defaultTimezone; let isDragging = false; let animationFrameId = null; // HELPER FUNCTIONS // ========================================================================== function findTimezoneAtPoint(lon, lat) { const point = [lon, lat]; for (const zone of zones) { if (d3.geoContains(zone, point)) { return zone.properties.time_zone; } } return currentTimezone; } function clampCoords(lon, lat) { return [ Math.max(-180, Math.min(180, lon)), Math.max(-90, Math.min(90, lat)) ]; } // UI ELEMENTS // ========================================================================== const container = html`

`; // Input controls const getLocationBtn = html``; const lonInput = html``; const latInput = html``; const tzSelect = html``; const inputRow = html`

${getLocationBtn} Longitude: ${lonInput} Latitude: ${latInput} Timezone: ${tzSelect}

`; // SVG MAP // ========================================================================== const svg = d3.create("svg") .attr("viewBox", `0 0 ${mapWidth} ${height}`) .attr("width", mapWidth) .style("display", "block") .style("cursor", "crosshair"); // Ocean background svg.append("path") .datum(outline) .attr("d", path) .attr("fill", styles.ocean.color) .attr("fill-opacity", styles.ocean.opacity); // Land svg.append("path") .datum(landData) .attr("d", path) .attr("fill", styles.land.color) .attr("fill-opacity", styles.land.opacity) .attr("pointer-events", "none"); // Graticule svg.append("path") .datum(graticule) .attr("d", path) .attr("stroke", styles.graticule.color) .attr("stroke-opacity", styles.graticule.opacity) .attr("fill", "none") .attr("pointer-events", "none"); // Timezone zones (rendered on top of land, styled dynamically) const zoneElements = svg.selectAll(".zone") .data(zones) .join("path") .attr("class", "zone") .attr("d", path) .attr("stroke", "none"); // Outline svg.append("path") .datum(outline) .attr("d", path) .attr("fill", "none") .attr("stroke", styles.outline.color) .attr("stroke-width", styles.outline.width) .attr("pointer-events", "none"); // User location marker const dotElement = svg.append("circle") .attr("r", styles.userLocation.radius) .attr("fill", styles.userLocation.color) .style("mix-blend-mode", styles.userLocation.blendMode) .attr("pointer-events", "none"); // UPDATE FUNCTIONS // ========================================================================== function updateMapVisuals() { // Highlight selected timezone zoneElements .attr("fill", d => d.properties.time_zone === currentTimezone ? styles.timezone.color : "none") .attr("fill-opacity", d => d.properties.time_zone === currentTimezone ? styles.timezone.opacity : 0); // Position user marker const coords = projection([currentLongitude, currentLatitude]); if (coords) { dotElement.attr("cx", coords[0]).attr("cy", coords[1]); } } function updateValue() { container.value = { longitude: currentLongitude, latitude: currentLatitude, timezone: currentTimezone }; container.dispatchEvent(new CustomEvent("input")); } function scheduleUpdate() { if (animationFrameId) return; animationFrameId = requestAnimationFrame(() => { updateMapVisuals(); updateValue(); animationFrameId = null; }); } function updateInputs() { lonInput.value = currentLongitude.toFixed(2); latInput.value = currentLatitude.toFixed(2); tzSelect.value = currentTimezone; } function setLocation(lon, lat, updateTz = true) { [currentLongitude, currentLatitude] = clampCoords(lon, lat); if (updateTz) { currentTimezone = findTimezoneAtPoint(currentLongitude, currentLatitude); } updateInputs(); scheduleUpdate(); } // EVENT HANDLERS // ========================================================================== // Map interaction function handleMapInteraction(event) { const [x, y] = d3.pointer(event); const coords = projection.invert([x, y]); if (coords) { setLocation(coords[0], coords[1]); } } svg.on("mousedown", (event) => { isDragging = true; handleMapInteraction(event); }); svg.on("mousemove", (event) => { if (isDragging) handleMapInteraction(event); }); svg.on("mouseup", () => { isDragging = false; }); svg.on("mouseleave", () => { isDragging = false; }); svg.on("click", (event) => { if (!isDragging) handleMapInteraction(event); }); // Input controls lonInput.addEventListener("input", () => { const val = parseFloat(lonInput.value); if (!isNaN(val)) setLocation(val, currentLatitude); }); latInput.addEventListener("input", () => { const val = parseFloat(latInput.value); if (!isNaN(val)) setLocation(currentLongitude, val); }); tzSelect.addEventListener("change", () => { currentTimezone = tzSelect.value; scheduleUpdate(); }); // Timezone dropdown looping tzSelect.addEventListener("keydown", (event) => { const idx = tzSelect.selectedIndex; const max = tzSelect.options.length - 1; if (event.key === "ArrowDown" && idx === max) { event.preventDefault(); tzSelect.selectedIndex = 0; currentTimezone = tzSelect.value; scheduleUpdate(); } else if (event.key === "ArrowUp" && idx === 0) { event.preventDefault(); tzSelect.selectedIndex = max; currentTimezone = tzSelect.value; scheduleUpdate(); } }); // Geolocation button getLocationBtn.addEventListener("click", () => { if (!navigator.geolocation) return; getLocationBtn.disabled = true; navigator.geolocation.getCurrentPosition( (pos) => { setLocation(pos.coords.longitude, pos.coords.latitude); getLocationBtn.disabled = false; }, (err) => { console.error("Geolocation error:", err.message); getLocationBtn.disabled = false; } ); }); // INITIALIZATION // ========================================================================== container.appendChild(inputRow); container.appendChild(svg.node()); updateMapVisuals(); updateValue(); return container; }46:[{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1774883844750.889,"size":545534},{"id":"2be16b42818bafe8ebd86c93f5a9b92db8ee1e3644f72e4afa94b65b920530a762ab6a13d8d6ec10245ffbc04b7940daee2fb9c388dd0d76c0c29ae492636803","href":"https://static.observableusercontent.com/files/2be16b42818bafe8ebd86c93f5a9b92db8ee1e3644f72e4afa94b65b920530a762ab6a13d8d6ec10245ffbc04b7940daee2fb9c388dd0d76c0c29ae492636803","name":"timezones.json","type":"application/json","lastModified":1774883843791.484,"size":786565}] 43:{"id":"81d243ac3af647a3","slug":null,"title":"Timezone Mapping","thumbnail":"f7df9f85d858674d3e6fd44097bb4691fe5c2ad78ba38409e11cf33b09a3725e","access_level":"public","create_time":"$D2026-03-30T15:15:58.794Z","update_time":"$D2026-03-30T15:48:03.227Z","view_time":null,"first_public_time":"$D2026-03-31T12:15:27.119Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc97a2766ef9be06","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":"starter_2024","bio":"","following":false},"version":17,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a092fa1ed8517f3f","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":null,"role":"editor"},{"type":"team","id":"dc97a2766ef9be06","login":"k-chat","name":"Kallol Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/f31a56f01fed3c9a0499394b5920853e37295852e119e35d12c6a0f8848a4d84","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Timezone Mapping","cells":[{"id":0,"value":"# Timezone Mapping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"land = FileAttachment(\"land-50m.json\").json().then(topology => topojson.feature(topology, topology.objects.land))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"timezones = FileAttachment(\"timezones.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"location","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"