Migrate unknown map to d3

frontend/package.json

@@ -64,6 +64,7 @@
 		"@types/react-router-hash-link": "^2.4.6",
 		"@types/react-scroll": "^1.8.9",
 		"@types/react-table": "^7.7.15",
+		"@types/topojson-client": "^3.1.5",
 		"@vitejs/plugin-react": "^4.3.4",
 		"autoprefixer": "^10.4.20",
 		"cross-env": "^7.0.3",
@@ -123,4 +124,4 @@
 			"last 1 safari version"
 		]
 	}
-}
+}

frontend/src/cards/UnknownsMapCard.tsx

@@ -1,6 +1,8 @@
 import { useLocation } from 'react-router-dom'
-import ChoroplethMap from '../charts/ChoroplethMap'
-import { unknownMapConfig } from '../charts/mapGlobals'
+import type { Topology } from 'topojson-specification'
+import ChoroplethMap from '../charts/choroplethMap/index'
+import type { DataPoint } from '../charts/choroplethMap/types'
+import { MAP_SCHEMES, type MapConfig } from '../charts/choroplethMap/types'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import type { DataTypeConfig } from '../data/config/MetricConfigTypes'
 import {
@@ -18,6 +20,7 @@ import {
 } from '../data/utils/Constants'
 import type { HetRow } from '../data/utils/DatasetTypes'
 import { Fips } from '../data/utils/Fips'
+import { het } from '../styles/DesignTokens'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import { useGuessPreloadHeight } from '../utils/hooks/useGuessPreloadHeight'
 import { useIsBreakpointAndUp } from '../utils/hooks/useIsBreakpointAndUp'
@@ -112,6 +115,12 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
 
   const HASH_ID: ScrollableHashId = 'unknown-demographic-map'
 
+  const unknownMapConfig: MapConfig = {
+    scheme: MAP_SCHEMES.unknown,
+    min: het.unknownMapLeast,
+    mid: het.unknownMapMid,
+  }
+
   return (
     <CardWrapper
       downloadTitle={chartTitle}
@@ -209,23 +218,21 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
                 }
               >
                 <ChoroplethMap
-                  demographicType={demographicType}
                   activeDemographicGroup={UNKNOWN}
                   countColsMap={{}}
+                  data={unknowns as DataPoint[]}
+                  demographicType={demographicType}
+                  extremesMode={false}
+                  filename={chartTitle}
+                  fips={props.fips}
+                  geoData={geoData as Topology}
                   isUnknownsMap={true}
-                  signalListeners={signalListeners}
-                  metric={metricConfig}
                   legendTitle={metricConfig?.unknownsVegaLabel ?? ''}
-                  data={unknowns}
-                  showCounties={!props.fips.isUsa()}
-                  fips={props.fips}
-                  hideLegend={
-                    mapQueryResponse.dataIsMissing() || unknowns.length <= 1
-                  }
-                  geoData={geoData}
-                  filename={chartTitle}
                   mapConfig={unknownMapConfig}
-                  extremesMode={false}
+                  metric={metricConfig}
+                  showCounties={!props.fips.isUsa()}
+                  signalListeners={signalListeners}
+                  updateFipsCallback={props.updateFipsCallback}
                 />
                 {props.fips.isUsa() && unknowns.length > 0 && (
                   <TerritoryCircles

frontend/src/charts/choroplethMap/index.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef } from 'react'
+import { useResponsiveWidth } from '../../utils/hooks/useResponsiveWidth'
+import { INVISIBLE_PRELOAD_WIDTH } from '../mapGlobals'
+import { HEIGHT_WIDTH_RATIO } from '../utils'
+import {
+  createColorScale,
+  createFeatures,
+  createProjection,
+} from './mapHelpers'
+import { renderMap } from './renderMap'
+import {
+  createTooltipContainer,
+  createTooltipLabel,
+  getTooltipPairs,
+} from './tooltipUtils'
+import type { ChoroplethMapProps } from './types'
+
+const ChoroplethMap = (props: ChoroplethMapProps) => {
+  const {
+    data,
+    metric,
+    isUnknownsMap,
+    activeDemographicGroup,
+    demographicType,
+    fips,
+    geoData,
+    showCounties,
+    overrideShapeWithCircle,
+    updateFipsCallback,
+    mapConfig,
+  } = props
+  const [ref, width] = useResponsiveWidth()
+  const svgRef = useRef<SVGSVGElement | null>(null)
+
+  const heightWidthRatio = overrideShapeWithCircle
+    ? HEIGHT_WIDTH_RATIO * 2
+    : HEIGHT_WIDTH_RATIO
+
+  const height = width * heightWidthRatio
+
+  const tooltipContainer = createTooltipContainer()
+
+  useEffect(() => {
+    if (!data.length || !svgRef.current || !width) return
+
+    const initializeMap = async () => {
+      const colorScale = createColorScale({
+        data,
+        metricId: metric.metricId,
+        scaleType: 'sequentialSymlog',
+        colorScheme: mapConfig.scheme,
+      })
+
+      const features = await createFeatures({
+        showCounties,
+        parentFips: fips.code,
+        geoData,
+      })
+
+      const projection = createProjection({ fips, width, height, features })
+
+      const tooltipLabel = createTooltipLabel(
+        metric,
+        activeDemographicGroup,
+        demographicType,
+        isUnknownsMap,
+      )
+
+      const tooltipPairs = getTooltipPairs(tooltipLabel)
+
+      renderMap({
+        svgRef,
+        geoData: { features, projection },
+        data,
+        metric,
+        width,
+        height,
+        tooltipContainer,
+        tooltipPairs,
+        tooltipLabel,
+        showCounties,
+        updateFipsCallback,
+        mapConfig,
+        colorScale,
+        fips,
+      })
+    }
+    initializeMap()
+    return () => {
+      tooltipContainer.remove()
+    }
+  }, [
+    data,
+    geoData,
+    width,
+    height,
+    showCounties,
+    overrideShapeWithCircle,
+    metric,
+  ])
+
+  return (
+    <div
+      className={`justify-center ${
+        width === INVISIBLE_PRELOAD_WIDTH ? 'hidden' : 'block'
+      }`}
+      ref={overrideShapeWithCircle ? undefined : ref}
+    >
+      <svg
+        ref={svgRef}
+        style={{
+          width: '100%',
+        }}
+      />
+    </div>
+  )
+}
+
+export default ChoroplethMap

frontend/src/charts/choroplethMap/mapHelpers.ts

@@ -0,0 +1,101 @@
+import * as d3 from 'd3'
+import type { FeatureCollection } from 'geojson'
+import { feature } from 'topojson-client'
+import { scaleType } from 'vega-lite/build/src/compile/scale/type'
+import { GEOGRAPHIES_DATASET_ID } from '../../data/config/MetadataMap'
+import { getLegendDataBounds } from '../mapHelperFunctions'
+import type {
+  CreateColorScaleProps,
+  CreateFeaturesProps,
+  CreateProjectionProps,
+  GetFillColorProps,
+} from './types'
+
+const DEFAULT_FILL = '#ccc'
+
+export const createColorScale = (props: CreateColorScaleProps) => {
+  const interpolatorFn = props.reverse
+    ? (t: number) => props.colorScheme(1 - t)
+    : props.colorScheme
+
+  let colorScale: d3.ScaleSequential<string>
+
+  const [legendLowerBound, legendUpperBound] = getLegendDataBounds(
+    props.data,
+    props.metricId,
+  )
+
+  const [min, max] = props.fieldRange
+    ? [props.fieldRange.min, props.fieldRange.max]
+    : [legendLowerBound, legendUpperBound]
+
+  if (props.scaleType === 'quantileSequential') {
+    const values = props.data
+      .map((d) => d[props.metricId])
+      .filter((val) => val != null)
+    d3.scaleSequentialSymlog
+    colorScale = d3
+      .scaleSequentialQuantile<string>(interpolatorFn)
+      .domain(values)
+  } else if (props.scaleType === 'sequentialSymlog') {
+    colorScale = d3
+      .scaleSequentialSymlog<string>()
+      .domain([min, max])
+      .interpolator(interpolatorFn)
+  } else {
+    throw new Error(`Unsupported scaleType: ${scaleType}`)
+  }
+
+  return colorScale
+}
+
+export const createFeatures = async (
+  props: CreateFeaturesProps,
+): Promise<FeatureCollection> => {
+  const { showCounties, parentFips, geoData } = props
+
+  const topology =
+    geoData ??
+    JSON.parse(
+      new TextDecoder().decode(
+        await window.fs.readFile(`/tmp/${GEOGRAPHIES_DATASET_ID}.json`),
+      ),
+    )
+
+  const geographyKey = showCounties ? 'counties' : 'states'
+
+  const features = feature(
+    topology,
+    topology.objects[geographyKey],
+  ) as unknown as FeatureCollection
+
+  const filtered =
+    parentFips === '00'
+      ? features
+      : {
+          ...features,
+          features: features.features.filter((f) =>
+            String(f.id)?.startsWith(parentFips),
+          ),
+        }
+
+  return filtered.features.length ? filtered : features
+}
+
+export const createProjection = (
+  props: CreateProjectionProps,
+): d3.GeoProjection => {
+  const { fips, width, height, features } = props
+
+  const isTerritory = fips.isTerritory() || fips.getParentFips().isTerritory()
+  return isTerritory
+    ? d3.geoAlbers().fitSize([width, height], features)
+    : d3.geoAlbersUsa().fitSize([width, height], features)
+}
+
+export const getFillColor = (props: GetFillColorProps): string => {
+  const { d, dataMap, colorScale } = props
+
+  const value = dataMap.get(d.id as string)
+  return value !== undefined ? colorScale(value) : DEFAULT_FILL
+}