import { GeoCustomChart } from "semiotic/geo" import { geoHitTarget, hatchFill, tokenLayer } from "semiotic/recipes" // Each site's capacity becomes an explicit tokenized measure, and each token // becomes a feet-anchored glyph scene node standing on the relief — canvas- // painted, with the partial final sign riding the node's fraction + ghostColor. // One geoHitTarget per site keeps the stack a single keyboard/hover mark. function dataCenterMapLayout(ctx) { const placed = sites.map((site) => { const section = sectionFor(site) // one of five parallels const [west, east] = outlineExtentAtLatitude(US_OUTLINE, section.latitude) const t = (site.lon - west) / (east - west) // position along the section const x = interpolate(P(west, lat)[0], P(east, lat)[0], t) const y = baseline - profileElevationAt(section.profile, t) * 34 return { site, x, y } }) return { nodes: [ ...placed.map(({ site, x, y }) => geoHitTarget({ x, y, r: 14, datum: site, id: site.id })), ...placed.flatMap(({ site, x, y }) => tokenLayer({ input: site.powerMW, encoding: { tokenType: "glyph", tokenSemantics: "unitized-measure", countStrategy: "unitized", unitValue: 100, unitMeaning: "one server sign = 100 MW", }, options: { tokenSize: 11, glyph: SERVER_SIGN, // a multi-part GlyphDef color: STATUS_META[site.status].color, // one cut, many inks ghostColor: PAPER_DEEP, datum: null, positionToken: (unit) => ({ x: x + unit.index * 12, y, // standing on the terrain }), }, }).nodes, ), ], overlays: <ReliefSectionsAndLabels water={hatchFill({ id: "sea", angle: 90 })} />, } } <GeoCustomChart areas={[US_OUTLINE]} points={sites.filter((site) => visibleStatuses.has(site.status))} projection="equirectangular" layout={dataCenterMapLayout} enableHover accessibleTable onObservation={inspectSite} />