Choropleth Map

1"use client";
2 
3import { Mercator } from "@visx/geo";
4import { ParentSize } from "@visx/responsive";
5import type { TransformMatrix } from "@visx/zoom";
6import { Zoom } from "@visx/zoom";
7import type { FeatureCollection, Geometry } from "geojson";
8import type { Transition } from "motion/react";
9import React, {
10  memo,
11  type ReactNode,
12  useCallback,
13  useEffect,
14  useMemo,
15  useRef,
16  useState,
17} from "react";
18import { cn } from "@/lib/utils";
19import {
20  type ChoroplethFeature,
21  type ChoroplethFeatureProperties,
22  ChoroplethInteractionShell,
23  ChoroplethStableProvider,
24  ChoroplethZoomContext,
25  type Margin,
26  useChoroplethInteraction,
27  type ZoomInstance,
28} from "./choropleth-context";
29import { ChoroplethFeature as ChoroplethFeatureLayer } from "./choropleth-feature";
30import { ChoroplethGraticule as ChoroplethGraticuleLayer } from "./choropleth-graticule";
31import { ChoroplethTooltip as ChoroplethTooltipLayer } from "./choropleth-tooltip";
32 
33export interface ChoroplethChartProps {
34  /** GeoJSON FeatureCollection data */
35  data: FeatureCollection<Geometry, ChoroplethFeatureProperties>;
36  /** Chart margins */
37  margin?: Partial<Margin>;
38  /** Animation duration in milliseconds. Default: 800 */
39  animationDuration?: number;
40  /** Motion enter transition (spring or cubic-bezier tween). */
41  enterTransition?: Transition;
42  /** Signature of motion URL state — triggers enter replay when it changes. */
43  revealSignature?: string;
44  /** Aspect ratio as "width / height". Default: "16 / 9" */
45  aspectRatio?: string;
46  /** Projection scale. If not provided, auto-calculated based on width */
47  scale?: number;
48  /** Center coordinates [longitude, latitude]. Default: [0, 20] */
49  center?: [number, number];
50  /** Translate offset [x, y]. If not provided, auto-calculated to center */
51  translate?: [number, number];
52  /** Enable zoom and pan. Default: false */
53  zoomEnabled?: boolean;
54  /** Minimum zoom scale. Default: 0.5 */
55  zoomMin?: number;
56  /** Maximum zoom scale. Default: 4 */
57  zoomMax?: number;
58  /** Initial zoom transform */
59  initialZoom?: TransformMatrix;
60  /** Additional class name for the container */
61  className?: string;
62  /** Child components (ChoroplethFeature, ChoroplethGraticule, ChoroplethTooltip) */
63  children: ReactNode;
64}
65 
66const DEFAULT_MARGIN: Margin = { top: 0, right: 0, bottom: 0, left: 0 };
67 
68// Known SVG component displayNames
69const SVG_COMPONENT_NAMES = new Set([
70  "ChoroplethFeature",
71  "ChoroplethGraticule",
72  "ChoroplethTooltip",
73]);
74 
75// … truncated