44:["$","title",null,{"children":"Secret polygons | Visionscarto | Observable"}] 4c:T414,Plot.plot({ caption: `${attribution} · grid every 0.005°`, width: mapWidth, height: mapInnerH + mapMargin.top + mapMargin.bottom, marginTop: mapMargin.top, marginRight: mapMargin.right, marginBottom: mapMargin.bottom, marginLeft: mapMargin.left, x: {domain: [0, W], ticks: ticks(bbox.west, bbox.east, 0.01).map(lonPx), tickFormat: (px) => `${(-pxLon(px)).toFixed(2)}°W`, label: null}, y: {domain: [H, 0], ticks: ticks(bbox.south, bbox.north, 0.01).map(latPx), tickFormat: (px) => `${pxLat(px).toFixed(2)}°N`, label: null}, marks: [ Plot.image([0], {x: W / 2, y: H / 2, src: mosaicURL, width: mapInnerW, height: mapInnerH, preserveAspectRatio: "none"}), Plot.gridX(ticks(bbox.west, bbox.east, 0.005).map(lonPx), {stroke: "white", strokeOpacity: 0.4}), Plot.gridY(ticks(bbox.south, bbox.north, 0.005).map(latPx), {stroke: "white", strokeOpacity: 0.4}), Plot.contour(score, {width: SW, height: SH, x1: 0, y1: 0, x2: W, y2: H, thresholds: [cell * cell * 0.5], stroke: "#d6336c", strokeWidth: 2, fill: null}) ] })4d:T729,const demoTile = tiles.find((t) => t.tx === 31937 && t.ty === 22699); const demoPhoto = document.createElement("canvas"); demoPhoto.width = demoPhoto.height = 256; const demoContext = demoPhoto.getContext("2d"); demoContext.drawImage(demoTile.img, 0, 0); const demoPixels = demoContext.getImageData(0, 0, 256, 256).data; function demoSame(i, k) { return demoPixels[i] === demoPixels[k] && demoPixels[i + 1] === demoPixels[k + 1] && demoPixels[i + 2] === demoPixels[k + 2]; } const demoMask = new ImageData(256, 256); for (let y = 0; y < 256; ++y) { for (let x = 0; x < 256; ++x) { const i = 4 * (y * 256 + x); const hit = (x < 255 && demoSame(i, i + 4)) || (y < 255 && demoSame(i, i + 4 * 256)); const g = Math.round((0.299 * demoPixels[i] + 0.587 * demoPixels[i + 1] + 0.114 * demoPixels[i + 2]) * 0.35); demoMask.data.set(hit ? [255, 61, 127, 255] : [g, g, g, 255], i); } } const demoMarked = document.createElement("canvas"); demoMarked.width = demoMarked.height = 256; demoMarked.getContext("2d").putImageData(demoMask, 0, 0); for (const c of [demoPhoto, demoMarked]) c.style = "width: 256px; height: 256px; image-rendering: pixelated;"; const demoCenter = [(-pxLon((demoTile.tx - tx0 + 0.5) * 256)).toFixed(3), pxLat((demoTile.ty - ty0 + 0.5) * 256).toFixed(3)]; display(html`

${demoPhoto}

one Esri tile at actual size (256 × 256 px)

${demoMarked}

pink = same R, G and B as its right or lower neighbor

Tile ${zoom}/${demoTile.tx}/${demoTile.ty}, centered on ${demoCenter[0]}°W ${demoCenter[1]}°N.

`);4e:T604,const radians = Math.PI / 180; function lon2tile(lon, z) { return ((lon + 180) / 360) * 2 ** z; } function lat2tile(lat, z) { return ((1 - Math.log(Math.tan(lat * radians) + 1 / Math.cos(lat * radians)) / Math.PI) / 2) * 2 ** z; } const zoom = 16; const bbox = {west: -4.585, east: -4.485, south: 48.28, north: 48.322}; const tx0 = Math.floor(lon2tile(bbox.west, zoom)); const tx1 = Math.floor(lon2tile(bbox.east, zoom)); const ty0 = Math.floor(lat2tile(bbox.north, zoom)); const ty1 = Math.floor(lat2tile(bbox.south, zoom)); function tileUrl(z, x, y) { return `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}`; } const attribution = "Imagery: Esri, Maxar, Earthstar Geographics, and the GIS User Community"; const mapWidth = width; const mapHeight = Math.round(mapWidth * (ty1 - ty0 + 1) / (tx1 - tx0 + 1)); const mapMargin = {top: 10, right: 10, bottom: 30, left: 60}; const mapInnerW = mapWidth - mapMargin.left - mapMargin.right; const mapInnerH = Math.round(mapInnerW * (ty1 - ty0 + 1) / (tx1 - tx0 + 1)); function lonPx(lon) { return (lon2tile(lon, zoom) - tx0) * 256; } function latPx(lat) { return (lat2tile(lat, zoom) - ty0) * 256; } function pxLon(px) { return (tx0 + px / 256) / 2 ** zoom * 360 - 180; } function pxLat(px) { return Math.atan(Math.sinh(Math.PI * (1 - 2 * (ty0 + px / 256) / 2 ** zoom))) / radians; } function ticks(lo, hi, step) { return d3.range(Math.ceil(lo / step - 1e-9), Math.floor(hi / step + 1e-9) + 1).map((i) => +(i * step).toFixed(3)); }4f:T428,const W = (tx1 - tx0 + 1) * 256; const H = (ty1 - ty0 + 1) * 256; const cell = 8; const SW = W / cell; const SH = H / cell; const mosaic = document.createElement("canvas"); mosaic.width = W; mosaic.height = H; const mosaicContext = mosaic.getContext("2d", {willReadFrequently: true}); for (const t of tiles) { if (t.img) { mosaicContext.drawImage(t.img, (t.tx - tx0) * 256, (t.ty - ty0) * 256); } } const pixels = mosaicContext.getImageData(0, 0, W, H).data; function sameColor(p, q) { return ( pixels[4 * p] === pixels[4 * q] && pixels[4 * p + 1] === pixels[4 * q + 1] && pixels[4 * p + 2] === pixels[4 * q + 2] ); } const score = new Float32Array(SW * SH); for (let y = 0; y < H - 1; ++y) { for (let x = 0; x < W - 1; ++x) { const p = y * W + x; const [r, g, b] = pixels.subarray(4 * p, 4 * p + 3); if (r > 0.6 * Math.min(g, b)) // ignore water pixels score[Math.floor(y / cell) * SW + Math.floor(x / cell)] += sameColor(p, p + 1) && sameColor(p, p + W); } } d3.blur2({data: score, width: SW}, 1.4);50:[] 48:{"id":"d86507b3bdfe773b","slug":"secret-polygons","title":"Secret polygons","thumbnail":"034bbdfde9dd2a2c51e5a17bda646db194401cff383304d32899c6370ea97cf0","access_level":"public","create_time":"$D2026-11-02T09:25:21.538Z","update_time":"$D2026-11-03T22:24:01.602Z","view_time":null,"first_public_time":"$D2026-11-03T22:16:57.731Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto","avatar_url":"https://avatars-next.observableusercontent.com/9946d22004b9d0eaf6a5bfda50b0a32ca1003656c403106c7b54f8dd5cf784b7","tier":"starter_2024","bio":"Maps — and other representations of the world.","followed_by_you":false,"follows_you":false},"version":620,"publish_version":620,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"958a492ccf138cc7","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto"}},"type":"notebook","body":{"titling":"auto","title":"Secret polygons","cells":[{"id":1,"value":"# Secret polygons\n\n*Day 03: Polygons.*\n\nStrategic sites are often censored on satellite imagery. Below is the [Île Longue](https://en.wikipedia.org/wiki/%C3%8Ele_Longue), the French Navy's nuclear submarine base in Brittany, as seen on [Esri World Imagery](https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9), and its censored polygons, in pink color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## Method\n\nWe detect **neighbors with exactly the same color** — something that almost never happens in a real photograph. The regions where this exceeds 50% of pixels give us three \"secret polygons\" (which are not _that_ secret, tbh).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$4d","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"Plot.plot({\n width: mapWidth,\n height: mapHeight,\n x: {axis: null, domain: [0, W]},\n y: {axis: null, domain: [H, 0]},\n color: {scheme: \"viridis\", domain: [0, cell * cell], clamp: true, legend: true, label: `identical neighbors (pixels per ${cell}×${cell} block)`},\n marks: [\n Plot.raster(score, {width: SW, height: SH, x1: 0, y1: 0, x2: W, y2: H}),\n Plot.contour(score, {width: SW, height: SH, x1: 0, y1: 0, x2: W, y2: H, thresholds: [cell * cell * 0.5], stroke: \"#ff3d7f\", strokeWidth: 1.5, fill: null})\n ]\n})","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"---\n\n*code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"const mapCanvas = document.createElement(\"canvas\");\nmapCanvas.width = mapWidth * devicePixelRatio;\nmapCanvas.height = mapHeight * devicePixelRatio;\nmapCanvas.getContext(\"2d\").drawImage(mosaic, 0, 0, mapCanvas.width, mapCanvas.height);\nconst mosaicURL = mapCanvas.toDataURL(\"image/jpeg\", 0.8);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"async function fetchTile(url) {\n return fetch(url).then((r) => r.blob()).then(createImageBitmap);\n}\nconst tiles = Promise.all(\n d3.cross(d3.range(ty0, ty1 + 1), d3.range(tx0, tx1 + 1)).map(async ([ty, tx]) => ({tx, ty, img: await fetchTile(tileUrl(zoom, tx, ty))}))\n);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 24:null