Map explorerPro

• US states and world countries
• Click to fly into a place
• Ranked list and search synced with the map
• Three metrics with quantile colours

• Sales, users or usage that differ by region.
• Spotting where to focus: the best and worst places at a glance.

• Comparing exact values between a handful of places: a bar chart is clearer.
• Values that just follow population: show per-person rates instead.

Import it from @/components/blocks/map-explorer after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { MapExplorer } from "@/components/blocks/map-explorer";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MapExplorer />
    </main>
  );
}

• The map has a text summary; every value is in the ranked list, which is the keyboard route.
• List items are buttons with aria-pressed for the selected place.

• The view flies to a place on a spring; colours fade when the metric changes.
• With reduced motion the view jumps instead.

• The list moves below the map under 768px; the map keeps its aspect ratio.

• Map shapes load only when a region is first shown (about 85 KB for US states, 110 KB for the world).
• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Replace sample() with a lookup by state or country name (or its id).
• Colours are quantiles, so each shade covers about the same number of places.