30: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; } 31:Ta4a,chart = { const updates = []; const plot = Plot.plot({ className: "geoparquet-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(features, { geometry: (feature) => { const geometry = feature.geometry; return geometry; }, title: (d) => { Object.keys(d.properties).map( (name) => `${name}: ${d.properties[name]}` ).join(` `); }, fill: "rgba(200, 0, 0, 1)", 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(); }32:T7c8,function zoom( projection, { // Capture the projection’s original scale, before any zooming. scale = projection._scale === undefined ? (projection._scale = projection.scale()) : projection._scale, scaleExtent = [0.5, 1000] } = {} ) { 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); } } ); }33:[{"id":"eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","href":"https://static.observableusercontent.com/files/eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","name":"land-110m.json","type":"application/json","lastModified":1735734065043.834,"size":55207}] 2e:{"title":"GeoParquet Viewer","cells":[{"id":0,"value":"# GeoParquet Viewer\n\nAnother take at a GeoParquet viewer, inspired by Éric Mauvière's [notebook](https://observablehq.com/@ericmauviere/geoparquet-viewer-with-duckdb-spatial) but using Observable Plot and a modified version of the DuckDB client ","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"viewof geofile = html``","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":365,"value":"viewof showAll = Inputs.toggle({ label: \"Show all timezones\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof tolerance = Inputs.range([0.01, 1], {\n value: 1,\n step: 0.01,\n label: \"Simplification tolerance\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"viewof simplify = Inputs.toggle({ label: \"Simplify geometries\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"viewof limit = Inputs.range([0, 100], {\n value: 1000,\n step: 1,\n label: \"Maximum number of features\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"geofileClient = {\n const client = await DuckDBClient.of({\n geofile\n });\n await client.query(\"LOAD spatial\");\n await client.query(\"INSTALL spatial\");\n return client;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"features = {\n const rawResult =\n await geofileClient.query(`SELECT *, st_asgeojson(geometry)::STRING AS geometry\n FROM geofile LIMIT ${limit}\n`);\n const result = rawResult.toArray().map((row) => {\n const { geometry: geometryString, ...rest } = row.toJSON();\n let geometry = JSON.parse(geometryString);\n if (simplify) {\n geometry = turf.simplify(geometry, { tolerance });\n }\n\n console.log(row.toJSON());\n return {\n type: \"Feature\",\n geometry,\n properties: { ...rest }\n };\n });\n return result;\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 console.log(\"here\", latitude, longitude);\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 console.log(\"here\");\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]()\n .rotate([-location[0], -location[1]])\n .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":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":"$32","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":243,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"turf = require(\"@turf/turf@7.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"turf.simplify(features[0])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}