30:T479,# Time Zone Service Inspired by [this notebook](https://observablehq.com/@mbostock/time-zones) by Mike Bostock I tried to do a dynamic version allowing to see the current time anywhere in the world, taking time savings into consideration. But how to the query the current time? No need for an API when you have DuckDB! I made a function which given location (lng/lat), returns the time zone, as queried in-browser from a geoparquet, using the DuckDB **spatial** extension. Import it in another notebook with: ~~~js import {getTimezones} from "@jcolot/time-zone-service" ~~~ Use it as (note the GeoJSON convention with longitude before latitude): ~~~js getTimezones(longitude, latitude) ~~~ It returns an array with hopefully one result, possibly more for contested territories or other exceptional cases. Data from `timezone-boundary-builder`: [https://github.com/evansiroky/timezone-boundary-builder/](https://github.com/evansiroky/timezone-boundary-builder/) (simplified) Code to generate the geoparquet: [https://gist.github.com/jcolot/f94e132901e79b83d4bf045bddc070ba](https://gist.github.com/jcolot/f94e132901e79b83d4bf045bddc070ba)31:T436,viewof location = { const form = html``; const formatLocation = ([x, y]) => [ `${Math.abs(y).toFixed(4)}°${y > 0 ? "N" : "S"}`, `${Math.abs(x).toFixed(4)}°${x > 0 ? "E" : "W"}` ].join(", "); form.b.onclick = async (event) => { form.value = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition( ({ coords: { longitude, latitude } }) => { set(viewof lat, latitude); set(viewof lon, longitude); resolve([longitude, latitude]); }, reject ); form.o.value = "Locating…"; }); form.o.value = formatLocation(form.value); form.dispatchEvent(new CustomEvent("input")); }; form.value = Object.assign([lon, lat], { timeZone: "America/Los_Angeles" }); form.o.value = formatLocation(form.value); return form; } 32:Td73,chart = { const updates = []; const plot = Plot.plot({ className: "tz-plot", projection, width, height, marks: [ Plot.sphere({ render, className: "cursor-pointer" }), Plot.geo(land, { fill: "#0007", stroke: "white", className: "pointer-events-none", render }), Plot.geo(countrymesh, { stroke: "white", render, className: "pointer-events-none" }), Plot.geo(tzs, { geometry: (tz) => { const geometry = tz.geometry; // not using d3.geoBounds as it gives -180, 180 and 90, -90 for Cuba/Guantanamo, don't know why... const bbox = getBoundingBox(geometry); const tzid = tz.properties.tzid; // Trying to fix some rewind issues, but avoiding other issues with malformed geojson (China/North Korea) if ( (!showAll && (Math.abs(bbox[0][0] - bbox[1][0]) < 10 || Math.abs(bbox[0][1] - bbox[1][1]) < 10 || tzid == "America/Nuuk" || tzid == "America/Adak" || tzid == "America/Asuncion" || tzid == "America/Havana" || tzid == "America/Santiago" || tzid == "Asia/Tehran" || tzid == "Pacific/Fiji" || tzid == "Antarctica/Troll")) || showAll ) { return rewind(geometry); } else { return geometry; } }, fill: (tz) => colorScale(dayjs().tz(tz.properties.tzid).utcOffset() / 60), stroke: "white", opacity: 0.85, className: "pointer-events-none", render }), Plot.geo( [ { radius: 1, color: "white" }, { radius: 0.5, color: "darkblue" } ], { geometry: d3 .geoCircle() .center(location) .radius((d) => d.radius), stroke: 0, fill: (d) => d.color, strokeWidth: 0, render } ), Plot.graticule({ render, className: "cursor-pointer" }) ] }); // https://observablehq.com/@d3/testing-projection-visibility function tester(projection, X, Y) { let visible; const stream = projection.stream({ point() { visible = true; } }); return (i) => ((visible = false), stream.point(X[i], Y[i]), visible); } // Replaces the output when zooming; this also covers marks such as Plot.dot that have x and y channels function render(i, s, v, d, c, n) { let g = n(i, s, v, d, c); if (v.x && v.y && !this.curve) { const X = v.channels.x.value; const Y = v.channels.y.value; updates.push(() => { i = d3.range(v.x.length).filter(tester(projection, X, Y)); for (const j of i) [v.x[j], v.y[j]] = projection([X[j], Y[j]]); g.replaceWith((g = n(i, s, v, d, c))); g.attr("pointer-events", "none"); }); } else { updates.push(() => g.replaceWith((g = n(i, s, v, d, c)))); } return g; } return d3 .select(plot) .call( zoom(projection) .on("zoom.render", () => updates.forEach((update) => update(1))) .on("end.render", () => updates.forEach((update) => update(0))) ) .on("mousemove", (event) => mouseMove(event, this)) .on("click", (event) => mouseClick(event, this)) .node(); }33:T7c5,function zoom( projection, { // Capture the projection’s original scale, before any zooming. scale = projection._scale === undefined ? (projection._scale = projection.scale()) : projection._scale, scaleExtent = [0.8, 8] } = {} ) { let v0, q0, r0, a0, tl; const zoom = d3 .zoom() .scaleExtent(scaleExtent.map((x) => x * scale)) .on("start", zoomstarted) .on("zoom", zoomed); function point(event, that) { const t = d3.pointers(event, that); if (t.length !== tl) { tl = t.length; if (tl > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); zoomstarted.call(that, event); } return tl > 1 ? [ d3.mean(t, (p) => p[0]), d3.mean(t, (p) => p[1]), Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]) ] : t[0]; } function zoomstarted(event) { v0 = versor.cartesian(projection.invert(point(event, this))); q0 = versor((r0 = projection.rotate())); } function zoomed(event) { projection.scale(event.transform.k); const pt = point(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(pt)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); // For multitouch, compose with a rotation around the axis. if (pt[2]) { const d = (pt[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } projection.rotate(versor.rotation(q1)); // In vicinity of the antipode (unstable) of q0, restart. if (delta[0] < 0.7) zoomstarted.call(this, event); } return Object.assign( (selection) => selection .property("__zoom", d3.zoomIdentity.scale(projection.scale())) .call(zoom), { on(type, ...options) { return options.length ? (zoom.on(type, ...options), this) : zoom.on(type); } } ); }34:[{"id":"eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","href":"https://static.observableusercontent.com/files/eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","name":"land-110m.json","type":"application/json","lastModified":1735045456888.578,"size":55207},{"id":"ca82b92bfa72adddf631d15e302e5eb1e742b113eaffa277c553a4bf16391597d50e931ea41807c6b84376b38ccd7bb967db4af50eb30fccab9f64f64ba34f36","href":"https://static.observableusercontent.com/files/ca82b92bfa72adddf631d15e302e5eb1e742b113eaffa277c553a4bf16391597d50e931ea41807c6b84376b38ccd7bb967db4af50eb30fccab9f64f64ba34f36","name":"timezones_simplified@3.parquet","type":"application/octet-stream","lastModified":1735595911232.861,"size":354488},{"id":"3878f1440fc211fc9de9427002e3002baeeb633b46435a6dd21ceb486b7f008c7100314bf34d7177533732289e6925fb95b9e09b27350e7e45cbad23a0643233","href":"https://static.observableusercontent.com/files/3878f1440fc211fc9de9427002e3002baeeb633b46435a6dd21ceb486b7f008c7100314bf34d7177533732289e6925fb95b9e09b27350e7e45cbad23a0643233","name":"topo-tz-simple@2.json","type":"application/json","lastModified":1735646491906.22,"size":579566}] 2e:{"title":"Time Zone Service","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof projectionName = Inputs.select(\n new Map([\n [\"Orthographic\", \"geoOrthographic\"],\n // [\"Bertin 1953\", \"geoBertin1953\"],\n [\"Azimuthal Equal-Area\", \"geoAzimuthalEqualArea\"],\n // [\"Cahill-Keyes\", \"geoCahillKeyes\"],\n [\"Mercator\", \"geoMercator\"]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof lat = Inputs.range([-85, 85], {\n value: 50,\n step: 0.1,\n label: \"Latitude\",\n className: \"input-latitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof lon = Inputs.range([-180, 180], {\n value: 4,\n step: 0.1,\n label: \"Longitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"{\n yield html`

Probable timezone: ${Array.from(\n new Set(selectedTzs.map((tz) => tz.properties.tzid))\n )\n .map((tzid) => {\n const offset = -dayjs.utc().tz(tzid).utcOffset() / 60;\n const sign = offset >= 0 ? \"+\" : \"\";\n return (\n tzid +\n \" where it's \" +\n dayjs(new Date()).tz(tzid).format(\"YYYY-MM-DD HH:mm:ss\") +\n \" in local time (GMT\" +\n sign +\n offset +\n \")\"\n );\n })\n .join(\", \")}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof showAll = Inputs.toggle({ label: \"Show all timezones\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"Legend(\n d3.scaleOrdinal(\n d3.range(-12, 15, width > 600 ? 1 : 2),\n palette.filter((d, i) => (width > 600 ? true : i % 2 === 0))\n ),\n {\n title: \"Time offset to UTC (hours)\",\n tickSize: 0,\n width: Math.min(600, width)\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"allTzsGeoJsonStitched = {\n const geojson = Object.keys(topoTzSimple.objects).map((key) =>\n topojson.feature(topoTzSimple, topoTzSimple.objects[key])\n );\n return geojson[0].features.filter((d) => d.properties.tzid !== \"Etc/UTC\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"mouseClick = {\n return function mouseClick(event) {\n const t = d3.pointers(event, this);\n const coords = projection.invert(t[0]);\n const projectedCoords = projection(coords);\n if (\n Math.abs(projectedCoords[0] - t[0][0]) < 2 &&\n Math.abs(projectedCoords[1] - t[0][1]) < 2\n ) {\n const latitude = coords[1];\n const longitude = coords[0];\n set(viewof lat, latitude);\n set(viewof lon, longitude);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"mouseMove = {\n let timeout;\n return function mouseMove(event) {\n const t = d3.pointers(event, this);\n const coords = projection.invert(t[0]);\n const projectedCoords = projection(coords);\n if (\n Math.abs(projectedCoords[0] - t[0][0]) < 2 &&\n Math.abs(projectedCoords[1] - t[0][1]) < 2\n ) {\n document.body.style.cursor = \"pointer\";\n clearTimeout(timeout);\n timeout = setTimeout(() => (document.body.style.cursor = null), 5000);\n } else {\n document.body.style.cursor = null;\n clearTimeout(timeout);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3\n .geoPath(projection.fitWidth(width, sphere))\n .bounds(sphere);\n const dy = Math.ceil(y1 - y0),\n l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"projection = d3[projectionName]().rotate([13, -43]).precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"land110 = FileAttachment(\"land-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"import { countrymesh } from \"@d3/world-choropleth/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"timezones = FileAttachment(\"timezones_simplified@3.parquet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"tzs = showAll ? allTzsGeoJsonStitched : selectedTzs","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"selectedTzs = {\n const rawResult = await client.query(\n `\n WITH found_tzid AS (\n SELECT tzid\n FROM timezones\n WHERE st_containsproperly(geometry, 'POINT(${location[0]} ${location[1]})'::GEOMETRY)\n LIMIT 1\n )\n SELECT tzid, st_asgeojson(geometry) AS geometry\n FROM timezones\n WHERE tzid = (SELECT tzid FROM found_tzid);\n`\n );\n const result = rawResult.toArray().map((row) => ({\n type: \"Feature\",\n geometry: JSON.parse(row.geometry),\n properties: { tzid: row.tzid }\n }));\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"colorScale = d3.scaleSequential(d3.interpolateRdBu).domain([12, -12])","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"client = {\n const client = await DuckDBClient.of({\n timezones: FileAttachment(\"timezones_simplified@3.parquet\")\n });\n await client.query(\"LOAD spatial\");\n await client.query(\"INSTALL spatial\");\n return client;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"land = topojson.feature(land110, land110.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import { DuckDBClient } from \"@jcolot/duckdb-in-webassembly-with-loadable-extensions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"dayjs = {\n const dayjs = await require(\"dayjs\");\n const timezone = await require(\"dayjs/plugin/timezone\");\n const utc = await require(\"dayjs/plugin/utc\");\n dayjs.extend(timezone);\n dayjs.extend(utc);\n\n return dayjs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"async function getTimezones(longitude, latitude) {\n const rawResult = await client.query(\n `SELECT *, st_asgeojson(geometry) as feature from timezones where st_containsproperly(geometry, 'POINT(${longitude} ${latitude})'::GEOMETRY) LIMIT 10;`\n );\n const result = rawResult.toArray();\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"import { rewind } from \"@fil/rewind\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"function getBoundingBox(feature) {\n if (!feature || !feature.coordinates || !Array.isArray(feature.coordinates)) {\n throw new Error(\"Invalid feature: must have a 'coordinates' array.\");\n }\n\n const bbox = feature.coordinates[0].reduce(\n (bbox, coord) => {\n const [lon, lat] = coord;\n\n return [\n Math.min(bbox[0], lon),\n Math.min(bbox[1], lat),\n Math.max(bbox[2], lon),\n Math.max(bbox[3], lat)\n ];\n },\n [Infinity, Infinity, -Infinity, -Infinity]\n );\n\n return [bbox.slice(0, 2), bbox.slice(2, 4)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"versor = require(\"versor@0.0.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"palette = d3.range(-12, 15, 1).map(colorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"topoTzSimple = FileAttachment(\"topo-tz-simple@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}