add Puerto Rico to map

src/components/home/StatusChart.tsx

@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import * as topojson from 'topojson'
-import { geoPath, geoAlbersUsa } from 'd3-geo'
+import us from '@site/static/geo/counties-with-pr-10m.json'
+import geoAlbersUsaPr from './geoAlbersUsaPr'
+import { geoPath } from 'd3-geo'
 import { select, pointer } from 'd3-selection'
 import { Delaunay } from 'd3-delaunay'
 import { schemeCategory10 as colorScheme } from 'd3-scale-chromatic'
 import { groupBy, uniq } from 'lodash'
 
-import us from '@site/static/geo/states-albers-10m.json'
-
 import JobMetrics from './JobMetrics'
 
 import config from '../../config'
@@ -72,11 +72,15 @@ function Map(props: MapProps) {
 
   const ref = useRef()
 
+  const projection = useMemo(() =>
+    geoAlbersUsaPr().scale(1300).translate([487.5, 305])
+  , [])
+
   useEffect(() => {
     if (!ref.current) return
 
+
     const svg = select(ref.current)
-    const projection = geoAlbersUsa().scale(1300).translate([487.5, 305])
 
     select(ref.current).append('defs').append('style')
       .text(`circle.highlighted { stroke: rgba(0, 0, 0); fill: rgba(0, 0, 0); }`)
@@ -209,8 +213,7 @@ function Map(props: MapProps) {
       .attr('fill', '#333')
   }, [title])
 
-
-  const path = geoPath()
+  const path = geoPath(projection)
 
   return (
     <svg viewBox="0 0 959 650" width="100%" height="100%" ref={ref}>

src/components/home/geoAlbersUsaPr.ts

@@ -0,0 +1,123 @@
+/**
+ * Based on: https://observablehq.com/@d3/u-s-map-with-puerto-rico
+ *
+ * Copyright 2019–2020 Observable, Inc.
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ */
+
+import { geoAlbers, geoConicEqualArea } from 'd3-geo';
+
+const epsilon = 1e-6;
+
+function multiplex(streams) {
+  return {
+    point(x, y) { for (const s of streams) s.point(x, y); },
+    sphere() { for (const s of streams) s.sphere(); },
+    lineStart() { for (const s of streams) s.lineStart(); },
+    lineEnd() { for (const s of streams) s.lineEnd(); },
+    polygonStart() { for (const s of streams) s.polygonStart(); },
+    polygonEnd() { for (const s of streams) s.polygonEnd(); }
+  };
+}
+
+
+export default function geoAlbersUsaPr() {
+  let cache,
+    lower48Point,
+    cacheStream,
+    alaskaPoint,
+    hawaiiPoint,
+    puertoRicoPoint,
+    point
+
+  const lower48 = geoAlbers(),
+    alaska = geoConicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]),
+    hawaii = geoConicEqualArea().rotate([157, 0]).center([-3, 19.9]).parallels([8, 18]),
+    puertoRico = geoConicEqualArea().rotate([66, 0]).center([0, 18]).parallels([8, 18]),
+    pointStream = {point: function(x, y) { point = [x, y]; }}
+
+  function albersUsa(coordinates) {
+    const x = coordinates[0],
+      y = coordinates[1];
+    return (
+      (point = null),
+      (lower48Point.point(x, y), point) ||
+        (alaskaPoint.point(x, y), point) ||
+        (hawaiiPoint.point(x, y), point) ||
+        (puertoRicoPoint.point(x, y), point)
+    );
+  }
+
+  albersUsa.invert = function(coordinates) {
+    const k = lower48.scale(),
+      t = lower48.translate(),
+      x = (coordinates[0] - t[0]) / k,
+      y = (coordinates[1] - t[1]) / k;
+    return (y >= 0.120 && y < 0.234 && x >= -0.425 && x < -0.214 ? alaska
+      : y >= 0.166 && y < 0.234 && x >= -0.214 && x < -0.115 ? hawaii
+        : y >= 0.204 && y < 0.234 && x >= 0.320 && x < 0.380 ? puertoRico
+          : lower48).invert(coordinates);
+  };
+
+  albersUsa.stream = function(stream) {
+    return cache && cacheStream === stream ? cache : cache = multiplex([lower48.stream(cacheStream = stream), alaska.stream(stream), hawaii.stream(stream), puertoRico.stream(stream)]);
+  };
+
+  albersUsa.precision = function(_) {
+    if (!arguments.length) return lower48.precision();
+    lower48.precision(_), alaska.precision(_), hawaii.precision(_), puertoRico.precision(_);
+    return reset();
+  };
+
+  albersUsa.scale = function(_) {
+    if (!arguments.length) return lower48.scale();
+    lower48.scale(_), alaska.scale(_ * 0.35), hawaii.scale(_), puertoRico.scale(_);
+    return albersUsa.translate(lower48.translate());
+  };
+
+  albersUsa.translate = function(_) {
+    if (!arguments.length) return lower48.translate();
+    const k = lower48.scale(), x = +_[0], y = +_[1];
+
+    lower48Point = lower48
+      .translate(_)
+      .clipExtent([[x - 0.455 * k, y - 0.238 * k], [x + 0.455 * k, y + 0.238 * k]])
+      .stream(pointStream);
+
+    alaskaPoint = alaska
+      .translate([x - 0.307 * k, y + 0.201 * k])
+      .clipExtent([[x - 0.425 * k + epsilon, y + 0.120 * k + epsilon], [x - 0.214 * k - epsilon, y + 0.234 * k - epsilon]])
+      .stream(pointStream);
+
+    hawaiiPoint = hawaii
+      .translate([x - 0.205 * k, y + 0.212 * k])
+      .clipExtent([[x - 0.214 * k + epsilon, y + 0.166 * k + epsilon], [x - 0.115 * k - epsilon, y + 0.234 * k - epsilon]])
+      .stream(pointStream);
+
+    puertoRicoPoint = puertoRico
+      .translate([x + 0.350 * k, y + 0.224 * k])
+      .clipExtent([[x + 0.320 * k, y + 0.204 * k], [x + 0.380 * k, y + 0.234 * k]])
+      .stream(pointStream);
+
+    return reset();
+  };
+
+  function reset() {
+    cache = cacheStream = null;
+    return albersUsa;
+  }
+
+  return albersUsa.scale(1070);
+}