# Choropleth explorer

A filled-region map that shades every state or region by revenue, growth or penetration on a stepped scale, with a country switch (United States, Canada, Brazil, United Kingdom, France, Germany, Italy, Australia), a hoverable legend, a synced ranked list and a camera zoom into local detail.

- ID: `choropleth-explorer`
- Import: `animui/choropleth-explorer`
- Category: block
- Runtime exports: `ChoroplethExplorer`
- Declaration: `types/pro/choropleth-explorer.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: revenue-globe, revenue-explorer, kpi-drilldown, metric-explorer

```tsx
import { ChoroplethExplorer } from 'animui/choropleth-explorer';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info choropleth-explorer` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface ChoroplethExplorerProps {
  maps?: string | number | boolean | ReactNode;
  defaultMap?: string | number | boolean | ReactNode;
  regions?: string | number | boolean | ReactNode;
  metrics?: string | number | boolean | ReactNode;
  defaultMetric?: string | number | boolean | ReactNode;
  viewBox?: string | number | boolean | ReactNode;
  areaName?: string;
  regionNoun?: string | number | boolean | ReactNode;
  title?: string;
  description?: string;
  onRegionOpen?: () => void;
  onMetricChange?: () => void;
  onMapChange?: () => void;
  className?: string;
}

export declare const ChoroplethExplorer: ComponentType<ChoroplethExplorerProps>;

export default ChoroplethExplorer;
```