completed d3 map

frontend/src/cards/UnknownsMapCard.tsx

@@ -1,8 +1,8 @@
 import { useLocation } from 'react-router-dom'
 import type { Topology } from 'topojson-specification'
-import ChoroplethMapD3 from '../charts/ChoroplethD3'
 import type { DataPoint } from '../charts/ChoroplethTypes'
-import { unknownMapConfig } from '../charts/mapGlobals'
+import ChoroplethMap from '../charts/choroplethMap/index'
+import { MAP_SCHEMES, type MapConfig } from '../charts/choroplethMap/types'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import type { DataTypeConfig } from '../data/config/MetricConfigTypes'
 import {
@@ -20,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'
@@ -114,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}
@@ -210,7 +217,7 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
                   props.fips.isUsa() ? 'mr-2 md:mr-16 xl:mr-24' : 'm-2'
                 }
               >
-                <ChoroplethMapD3
+                <ChoroplethMap
                   activeDemographicGroup={UNKNOWN}
                   countColsMap={{}}
                   data={unknowns as DataPoint[]}
@@ -225,6 +232,7 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
                   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