visualize-admin · hupf · Mar 26, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,14 @@ You can also check the
     runtime, to avoid having to rebuild the application when the key is rotated
   - Use AGENTS.md instead of CLAUDE.md and adjust context according to recent
     findings of studies about the impact of context files for coding AIs
+- Fixes
+  - Normalize the polygon winding order of geometries to CCW ("right hand rule")
+    after parsing and replace the CW-only d3-geo helpers `geoBounds`, `geoArea`
+    and `geoCentroid` with the CCW-aware Turf helpers `bbox`, `area` and the
+    Mapbox helper `polylabel` (to calculate the "pole of inaccessibility"). This
+    makes Visualize winding order agnostic and fixes a specific bug with newer
+    CCW geometries from Swisstopo where map diagrams were zoomed to the world
+    instead of Switzerland (older geometries all had CW winding order).
 
 ### 6.4.0 – 2026-03-13
 

diff --git a/app/charts/map/helpers.ts b/app/charts/map/helpers.ts
@@ -1,7 +1,7 @@
 import { WebMercatorViewport } from "@deck.gl/core";
 import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox";
+import turfBbox from "@turf/bbox";
 import { extent } from "d3-array";
-import { geoBounds } from "d3-geo";
 import { useEffect, useMemo, useState } from "react";
 import { useControl, ViewState } from "react-map-gl";
 import { feature } from "topojson-client";
@@ -137,9 +137,12 @@ export const getBBox = (
   let symbolsBbox: BBox | undefined;
 
   if (shapes) {
-    const _shapesBbox = geoBounds(shapes);
-    if (!_shapesBbox.flat().some(isNaN)) {
-      shapesBbox = _shapesBbox;
+    const [minLng, minLat, maxLng, maxLat] = turfBbox(shapes);
+    if (![minLng, minLat, maxLng, maxLat].some(isNaN)) {
+      shapesBbox = [
+        [minLng, minLat],
+        [maxLng, maxLat],
+      ] as BBox;
     }
   }
 

diff --git a/app/charts/map/map-state-props.ts b/app/charts/map/map-state-props.ts
@@ -1,5 +1,6 @@
-import { geoCentroid } from "d3-geo";
+import turfArea from "@turf/area";
 import keyBy from "lodash/keyBy";
+import polylabel from "polylabel";
 import { useMemo } from "react";
 
 import { ChartMapProps } from "@/charts/map/chart-map";
@@ -156,10 +157,32 @@ export const useMapStateData = (
         observations: data.chartData,
       });
 
-      const points = features.map((d) => ({
-        ...d,
-        coordinates: geoCentroid(d),
-      }));
+      const points: GeoPoint[] = features.map((d) => {
+        // We use the "pole of inaccessibility" algorithm to find a point within
+        // the polygon (Turf's centroid or centerOfMass are not necessary inside
+        // the polygon and pointOnFeature is often too close to the border). The
+        // polylabel utility (from Mapbox) only accepts a single polygon
+        // (Position[][]), so for MultiPolygon, pick the sub-polygon with the
+        // largest outer-ring area so the label sits inside the visually
+        // dominant part.
+        const polygon =
+          d.geometry.type === "MultiPolygon"
+            ? d.geometry.coordinates.reduce((largest, current) => {
+                return turfArea({ type: "Polygon", coordinates: current }) >
+                  turfArea({ type: "Polygon", coordinates: largest })
+                  ? current
+                  : largest;
+              })
+            : d.geometry.coordinates;
+        const [x, y] = polylabel(
+          polygon,
+          1e-2 // ≈ ~1 km (lower precision value = more accurate but slower)
+        );
+        return {
+          ...d,
+          coordinates: [x, y],
+        };
+      });
 
       return {
         points,

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
@@ -6,7 +6,7 @@ import {
 import { supported } from "@mapbox/mapbox-gl-supported";
 import { Button, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { geoArea } from "d3-geo";
+import turfArea from "@turf/area";
 import debounce from "lodash/debounce";
 import orderBy from "lodash/orderBy";
 import uniq from "lodash/uniq";
@@ -302,7 +302,7 @@ export const MapComponent = ({
     // Sort for smaller shapes to be over larger ones, to be able to use tooltip
     const sortedFeatures = orderBy(
       features.areaLayer?.shapes?.features,
-      geoArea,
+      turfArea,
       "desc"
     ) satisfies GeoFeature[];
 

diff --git a/app/graphql/resolvers/rdf.ts b/app/graphql/resolvers/rdf.ts
@@ -1,10 +1,11 @@
+import { rewindGeometry } from "@placemarkio/geojson-rewind";
 import { ascending, descending } from "d3-array";
 import DataLoader from "dataloader";
 import groupBy from "lodash/groupBy";
 import ParsingClient from "sparql-http-client/ParsingClient";
 import { topology } from "topojson-server";
 import { LRUCache } from "typescript-lru-cache";
-import { parse as parseWKT } from "wellknown";
+import { GeoJSONGeometry, parse as parseWKT } from "wellknown";
 
 import { Filters } from "@/config-types";
 import {
@@ -127,6 +128,16 @@ export const searchCubes: NonNullable<QueryResolvers["searchCubes"]> = async (
   });
 };
 
+/**
+ * Normalize the geometry's winding order to follow GeoJSON standards. It is
+ * converted to CCW (a.k.a. "right hand rule") if it has a non-standard CW
+ * winding order.
+ */
+const rewind = (geometry: GeoJSONGeometry): GeoJSONGeometry => {
+  if (!geometry) return null;
+  return rewindGeometry(geometry) as GeoJSONGeometry;
+};
+
 export const dataCubeDimensionGeoShapes: NonNullable<
   QueryResolvers["dataCubeDimensionGeoShapes"]
 > = async (_, { locale, cubeFilter }, { setup }, info) => {
@@ -178,7 +189,7 @@ export const dataCubeDimensionGeoShapes: NonNullable<
           iri: value,
           label: dimensionValuesByValue.get(value),
         },
-        geometry: parseWKT(shape.wktString),
+        geometry: rewind(parseWKT(shape.wktString)),
       };
     });
 

diff --git a/app/package.json b/app/package.json
@@ -52,6 +52,7 @@
     "@opentelemetry/sdk-node": "^0.211.0",
     "@opentelemetry/sdk-trace-node": "^2.5.0",
     "@opentelemetry/semantic-conventions": "^1.39.0",
+    "@placemarkio/geojson-rewind": "^1.0.3",
     "@preconstruct/next": "^3.0.1",
     "@prisma/client": "^4.10.1",
     "@rdfjs/data-model": "^2.0.2",
@@ -62,6 +63,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tpluscode/rdf-ns-builders": "2.0.1",
     "@tpluscode/sparql-builder": "^0.3.31",
+    "@turf/area": "7.3.4",
+    "@turf/bbox": "7.3.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uiw/react-color": "^2.3.2",
     "@urql/devtools": "^2.0.3",
@@ -83,7 +86,6 @@
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
     "d3-format": "^3.1.0",
-    "d3-geo": "^3.1.1",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
@@ -132,6 +134,7 @@
     "nprogress": "^0.2.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
+    "polylabel": "^2.0.1",
     "prisma": "^4.10.1",
     "qs": "^6.13.1",
     "rdf-cube-view-query": "^2.1.1",
@@ -205,7 +208,6 @@
     "@types/d3-delaunay": "^6.0.4",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-format": "^3.0.4",
-    "@types/d3-geo": "^3.1.0",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.8",
@@ -226,6 +228,7 @@
     "@types/nprogress": "^0.2.0",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
+    "@types/polylabel": "^1.1.3",
     "@types/qs": "^6.9.8",
     "@types/rdf-ext": "^1.3.8",
     "@types/rdfjs__data-model": "2.0.7",