src/song-274/Transect.tsx

@@ -18,7 +18,14 @@ import {
   type Frame,
 } from "./camera";
 import type { Cue, RosterItem, TransectData } from "./data";
-import { extendBounds, GROUND, prefixBounds, projectGround, routePath } from "./layout";
+import {
+  extendBounds,
+  GROUND,
+  nodePositions,
+  prefixBounds,
+  projectGround,
+  routePath,
+} from "./layout";
 import { useWindowedAudioData } from "@remotion/media-utils";
 import { isAwake, mixLooks, nodeLookAt, spectrumLook } from "./nodeAnimation";
 import {
@@ -100,6 +107,11 @@ export const Transect: React.FC<TransectProps> = ({ palette, audio, data }) => {
   );
   const parts = useMemo(() => narrationParts(data ? data.lines : []), [data]);
   const cueMap = useMemo(() => cuesByObject(data ? data.cues : []), [data]);
+  // Nodes at identical coordinates are spread slightly apart along the road.
+  const positions = useMemo(
+    () => (data && projection ? nodePositions(data.items, data.route, projection) : null),
+    [data, projection],
+  );
   // Each node gets one log-spaced band, dealt out in a seeded shuffle.
   const frequencies = useMemo(
     () => shuffledBandFrequencies(data ? data.items.length : 0),
@@ -112,7 +124,7 @@ export const Transect: React.FC<TransectProps> = ({ palette, audio, data }) => {
     windowInSeconds: AUDIO_WINDOW_S,
   });
 
-  if (!data || !projection || !kmAt) {
+  if (!data || !projection || !kmAt || !positions) {
     return <AbsoluteFill style={{ backgroundColor: palette.background }} />;
   }
 
@@ -165,8 +177,8 @@ export const Transect: React.FC<TransectProps> = ({ palette, audio, data }) => {
   const draw = ({ item, look }: (typeof nodes)[number]) => (
     <circle
       key={item.object}
-      cx={projection.x(item.lon)}
-      cy={projection.y(item.lat)}
+      cx={positions.get(item.object)?.x ?? projection.x(item.lon)}
+      cy={positions.get(item.object)?.y ?? projection.y(item.lat)}
       r={look.radius}
       fill={palette[item.family]}
       opacity={look.opacity}

src/song-274/data.ts

@@ -11,6 +11,8 @@ export type RosterItem = {
   object: string;
   kind: string;
   family: FeatureFamily;
+  /** Distance along the road; the nearest road point for off-road objects. */
+  km: number;
   lat: number;
   lon: number;
 };
@@ -163,6 +165,7 @@ export const loadTransectData = async (): Promise<TransectData> => {
       object: r.object,
       kind: r.kind,
       family: familyOf(r.kind, r.object),
+      km: Number(r.km),
       lat: Number(r.lat),
       lon: Number(r.lon),
     });

src/song-274/layout.ts

@@ -1,4 +1,4 @@
-import type { RoutePoint } from "./data";
+import type { RosterItem, RoutePoint } from "./data";
 
 /**
  * The "Ground — true shape" projection of `274-transect.html`, in the page's
@@ -38,6 +38,72 @@ export const projectGround = (route: RoutePoint[]): Projection => {
   };
 };
 
+/**
+ * Distance, in map units, between nodes that share exactly the same roster
+ * coordinates (草木橋 / 滝の上こ線橋, ポン久留喜橋 / 久留喜橋, モトツ橋 /
+ * モトツシェルター): small, so they read as a doubled dot on the road. Grows with
+ * zoom like the nodes themselves. (1 map unit ≈ 44 m on the ground here.)
+ */
+export const COINCIDENT_SPREAD = 1.5;
+
+export type NodePosition = { x: number; y: number };
+
+/** Direction of the road at `km`, as a unit vector in map units. */
+const roadDirection = (route: RoutePoint[], km: number, proj: Projection) => {
+  const at = (k: number) => {
+    let i = 1;
+    while (i < route.length - 1 && route[i][0] < k) {
+      i++;
+    }
+    const [k0, lat0, lon0] = route[i - 1];
+    const [k1, lat1, lon1] = route[i];
+    const p = k1 === k0 ? 0 : Math.min(1, Math.max(0, (k - k0) / (k1 - k0)));
+    return { x: proj.x(lon0 + (lon1 - lon0) * p), y: proj.y(lat0 + (lat1 - lat0) * p) };
+  };
+  const a = at(km - 0.1);
+  const b = at(km + 0.1);
+  const length = Math.hypot(b.x - a.x, b.y - a.y);
+  return length > 0 ? { x: (b.x - a.x) / length, y: (b.y - a.y) / length } : { x: 1, y: 0 };
+};
+
+/**
+ * Where each node is drawn, by object name. Usually its roster coordinate; nodes
+ * sharing exactly the same coordinate are spread COINCIDENT_SPREAD apart along
+ * the road there, in road order, centred on the shared point. All such pairs are
+ * on-road structures, so they stay on the road. Keep the spread small: at 6,
+ * モトツシェルター landed on 福山トンネル, only 90 m further on.
+ */
+export const nodePositions = (
+  items: RosterItem[],
+  route: RoutePoint[],
+  proj: Projection,
+): Map<string, NodePosition> => {
+  const groups = new Map<string, RosterItem[]>();
+  for (const item of items) {
+    const key = `${item.lat},${item.lon}`;
+    const group = groups.get(key) ?? [];
+    group.push(item);
+    groups.set(key, group);
+  }
+
+  const positions = new Map<string, NodePosition>();
+  groups.forEach((group) => {
+    const x = proj.x(group[0].lon);
+    const y = proj.y(group[0].lat);
+    if (group.length === 1) {
+      positions.set(group[0].object, { x, y });
+      return;
+    }
+    const ordered = group.slice().sort((a, b) => a.km - b.km);
+    const dir = roadDirection(route, ordered[0].km, proj);
+    ordered.forEach((item, i) => {
+      const offset = (i - (ordered.length - 1) / 2) * COINCIDENT_SPREAD;
+      positions.set(item.object, { x: x + dir.x * offset, y: y + dir.y * offset });
+    });
+  });
+  return positions;
+};
+
 export type Bounds = { minX: number; minY: number; maxX: number; maxY: number };
 
 /** Bounds of the projected route from its start up to each point, inclusive. */