Geo Visualizations | TFE Svelte Templates

🗺️

GeoChoropleth

Color-coded regions based on data values like population or sales

🔵

GeoBubbleMap

Sized circles at geographic locations proportional to values

📊

GeoSpikeMap

Vertical spikes showing magnitude at locations for 3D effect

GeoChoropleth - UK Regions

Hover over regions to see details. Click to select. Toggle between population and sales data.

1.9 9.3

Usage Examples

<script>
  import GeoChoropleth from '$lib/components/GeoChoropleth.svelte';
  import { FALLBACK_UK_REGION_DATA, GEO_COLOR_SCALES } from '$lib/constants';

  // geojson loaded from server or API
  let { data } = $props();

  function handleClick(region) {
    console.log('Selected:', region.name, region.value);
  }
</script>

<GeoChoropleth
  geojson={data.geojson}
  data={FALLBACK_UK_REGION_DATA}
  colorScale={{ type: 'sequential', colors: GEO_COLOR_SCALES.blues }}
  height={500}
  showLegend={true}
  showTooltip={true}
  onRegionClick={handleClick}
/>

Data Formats

GeoRegionData (Choropleth)

interface GeoRegionData {
  regionId: string;  // Matches GeoJSON feature ID
  value: number;     // Data value for coloring
  label?: string;    // Optional tooltip label
}

// Example:
{ regionId: 'E12000007', value: 8.80, label: 'London' }

GeoDataPoint (Bubble/Spike)

interface GeoDataPoint {
  id: string;        // Unique identifier
  name: string;      // Location name
  lat: number;       // Latitude
  long: number;      // Longitude
  value: number;     // Data value (size/height)
  category?: string; // Optional category
  color?: string;    // Optional custom color
}

// Example:
{ id: 'london', name: 'London', lat: 51.5074, long: -0.1278, value: 8982 }

Component Comparison

Feature	GeoChoropleth	GeoBubbleMap	GeoSpikeMap
Best For	Regional data	Point magnitudes	Dramatic visual impact
Data Type	Regions (polygons)	Points (lat/long)	Points (lat/long)
Value Encoding	Fill color	Circle area	Spike height
Background Map	Required	Optional	Optional
Tooltips	✅	✅	✅
Click Events	✅	✅	✅
Labels	Via tooltip	✅ On large bubbles	Via tooltip
Legend	✅ Color gradient	✅ Size comparison	✅ Height comparison

Dependencies

These components use LayerChart for SVG rendering and D3 for projections and scales.

bun add layerchart

LayerChart includes D3 geo/scale dependencies. No additional packages required.