2b:null 2c:["$","title",null,{"children":"unstitch polygon with d3 | jleedev | Observable"}] 31:[] 2f:{"id":"b11fc77350167170","slug":null,"title":"unstitch polygon with d3","thumbnail":"cc84ee1ad1f80d5f0944dc4d9dc64c8264462a222c72cbd14f2a2745bb3e2d66","access_level":"public","create_time":"$D2022-08-29T12:39:51.065Z","update_time":"$D2022-12-21T16:59:03.186Z","view_time":null,"first_public_time":"$D2022-12-15T20:09:36.823Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"93f88a392b09c0b2","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":"starter_2024"},"version":2033,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5e0663ad99246fa","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":null}],"members":[{"type":"individual","id":"b5e0663ad99246fa","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"unstitch polygon with d3","cells":[{"id":0,"value":"# unstitch polygon with d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":853,"value":"Definitely a case of “d3’s API surface is just too big.” I just want to unstitch a polygon at the antimeridian, but I need to manually rig up an identity transform that’s actually hooked up to the clipping logic; `d3.geoIdentity` doesn’t do this that I can figure out.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":706,"value":"unstitch = (geojson) => {\n let identity = d3\n .geoProjection((x, y) => [x, y])\n .scale(180 / Math.PI)\n .translate([0, 0])\n .reflectY(true);\n return fixWinding(d3.geoProject(geojson, identity));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"die = (x) => {\n throw new Error(x);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1643,"value":"wind_cw = (ring) =>\n d3.geoArea(turf.polygon([ring])) > 2 * Math.PI ? [...ring].reverse() : ring","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"wind_ccw = (ring) =>\n d3.geoArea(turf.polygon([ring])) < 2 * Math.PI ? [...ring].reverse() : ring","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"fixWinding = (object, { reverse = false } = {}) => {\n let wind_outer = reverse ? wind_ccw : wind_cw;\n let wind_inner = reverse ? wind_cw : wind_ccw;\n let Polygon = ([outer, ...inners]) => [\n wind_outer(outer),\n ...inners.map(wind_inner)\n ];\n let MultiPolygon = (polygons) => polygons.map(Polygon);\n let _fixWinding = (feature) => ({\n ...feature,\n geometry: {\n ...feature.geometry,\n coordinates: (\n { Polygon, MultiPolygon }[feature.geometry.type] ?? ((x) => x)\n )(feature.geometry.coordinates)\n }\n });\n return turf.featureCollection(\n turf.flattenReduce(object, (acc, x) => (acc.push(_fixWinding(x)), acc), [])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"compareUnstitch({ objects: land })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"compareUnstitch({ objects: countries })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"compareUnstitch({\n projection: d3.geoEquirectangular(),\n objects: turf.featureCollection([\n countryByName(\"Russia\"),\n countryByName(\"Antarctica\")\n ]),\n style: () => ({ fill: \"#f002\", stroke: \"#000\" })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"antarctica = countryByName(\"Antarctica\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"show(antarctica)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2014,"value":"grid(\n ...turf\n .flatten(antarctica)\n .features.map((f) => showArea(f, { projection: d3.geoEquirectangular() }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"grid(\n ...turf\n .flatten(unstitch(antarctica))\n .features.map((f) => showArea(f, { projection: d3.geoMercator() }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"d3.geoArea(unstitch(antarctica))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"showArea = (object, { ...args } = {}) =>\n html`${show(object, {\n height: 100,\n style: () => ({ fill: \"#f004\", stroke: \"black\" }),\n ...args\n })}

${+d3.geoArea(object).toExponential(6)}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"showArea(antarctica)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1782,"value":"showArea(unstitch(antarctica))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"showArea(fixWinding(unstitch(antarctica)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"grid(...featureMap(unstitch(antarctica), showArea))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1994,"value":"grid(\n ...unstitch(antarctica)\n .features.map((f) => fixWinding(f, { reverse: false }))\n .map(showArea)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"x = showArea(fixWinding(unstitch(antarctica), { reverse: true }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1795,"value":"show(turf.flatten(antarctica), {\n style: () => ({ fill: \"#f006\", stroke: \"#000\" })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"compareUnstitch({\n projection,\n objects: countryByName(\"Antarctica\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"viewof projection_ = projectionInput()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2006,"value":"projection = d3.geoAirocean()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"map = {\n let w = width;\n return ({\n projection = d3.geoAirocean(),\n objects,\n width = w,\n height = 300,\n style = styleFeature\n } = {}) => {\n const outline = { type: \"Sphere\" };\n const pad = 2;\n const path = d3.geoPath(projection);\n let {\n width: w,\n height: h,\n viewBox\n } = fit(path, [width, height], pad, outline);\n const outlinePath = path(outline);\n\n let clipPath = `path(\"${outlinePath}\")`;\n return htl.svg``;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"show = (object, { ...args } = {}) =>\n map({ projection, ...args, objects: object })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"styleFeature = (object) => ({\n fill: object.geometry.type == \"LineString\" ? \"none\" : \"red\",\n stroke: \"black\",\n ...object.properties.style\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"grid(\n map({ objects: land, width: width / 2 }),\n map({ objects: countries, width: width / 2 })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"map({ objects: d3.geoGraticule10() })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"res = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"cellToPolygon = (id) => [h3.cellToBoundary(id, true).reverse()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"cellToPolygonFeature = (id) => {\n let { geometry } = turf.polygon([h3.cellToBoundary(id, true).reverse()]);\n return turf.feature(geometry, { id }, { id });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"cellsToMultiPolygon = ids => turf.multiPolygon(ids.map(cellToPolygon))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"cellsToFeatureCollection = (ids) =>\n turf.featureCollection(ids.map(cellToPolygonFeature))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"cells = h3.getRes0Cells().flatMap((id) => h3.cellToChildren(id, res))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"featureMap = (object, mapper) =>\n turf.flattenReduce(object, (acc, x) => (acc.push(mapper(x)), acc), [])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"compareUnstitch({\n projection: d3.geoAirocean(),\n objects: colorHexes(cellsToFeatureCollection(cells))\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"colorHexes = (obj) =>\n turf.featureCollection(\n featureMap(obj, (feature) => ({\n ...feature,\n properties: {\n ...feature.properties,\n style: {\n fill: cellColor(feature.id),\n stroke: \"white\"\n }\n }\n }))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"cellColor = (id) => d3.interpolateRdYlGn(h3.getBaseCellNumber(id) / 122)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"import {projectionInput} from \"@d3/projection-comparison\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"compareUnstitch({\n projection,\n objects: colorHexes(cellsToFeatureCollection(cells))\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"compareUnstitch = ({ objects, ...args }) => {\n let w = width / 2;\n return grid(\n map({ ...args, objects, width: w }),\n map({\n ...args,\n objects: unstitch(objects),\n width: w\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"grid = function* (...vals) {\n let el = vals[0];\n // Access the first element of fragment instead of the automatically wrapped span\n if (el instanceof HTMLSpanElement && el.firstChild instanceof Element) {\n el = el.firstChild;\n }\n let cl = el?.cloneNode();\n let rect = (yield cl)?.getBoundingClientRect();\n let w = rect?.width;\n let style = w && { \"--grid-width\": `${w}px` };\n yield htl.html`\n

\n ${vals.map(\n (v) => htl.html`\n

${v}`\n )}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"compareUnstitch({\n objects: countryByName(\"Russia\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"compareUnstitch({\n projection: d3.geoStereographic(),\n objects: turf.multiPolygon(\n cells.filter((_, i) => i % 2 == 0).map(cellToPolygon)\n )\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"fit = (path, [width, height], pad = 1, outline) => {\n path.projection().fitSize([width - pad * 2, height - pad * 2], outline);\n let bounds = path.bounds(outline);\n let [x, y, x2, y2] = bounds.flat();\n [x, y] = [x - pad, y - pad];\n [x2, y2] = [x2 + pad, y2 + pad];\n\n let [w, h] = [x2 - x, y2 - y];\n const viewBox = [x, y, w, h].join();\n return { viewBox, width: w, height: h };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"fit(d3.geoPath(d3.geoEquirectangular()), [300, 150], 1, { type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"outline = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"d3 = require(\"d3\", \"d3-geo\", \"d3-geo-projection\", \"d3-geo-polygon\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"world = d3.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"countriesByName = d3.index(countries.features, (d) => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"countryByName = (name) => countriesByName.get(name) ?? die(`not found: ${name}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"h3 = require(\"h3-js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"