Get started

d3-maps is a toolkit for interactive SVG maps in React and Vue. Reactive components, pure SVG and D3.js power without low-level wiring.

Let's build your first map 👇

Install

npm install @d3-maps/vue

Load data

Load a map data object first

const { default: data } = await import('@d3-maps/atlas/world/countries/countries-110m')

See Atlas for more maps

Render the map

Pass the data to MapFeatures

<script setup lang="ts">
import { MapBase, MapFeatures, type MapData } from '@d3-maps/vue'
defineProps<{
  data: MapData
}>()
</script>

<template>
  <MapBase>
    <MapFeatures :data="data" />
  </MapBase>
</template>

Result

When to use

Case	Supported	Notes
SVG map charts	✅	Choropleth, bubble, heatmap, etc
Components API	✅	React & Vue packages
GeoJSON/TopoJSON rendering	✅	Renders to SVG
Markers, lines, annotations	✅	Framework-native components
Zoomable maps	✅	SVG zoom and pan
Full chart workflow	⚠️	Use amCharts, Highcharts or Plot
Low-level map rendering	⚠️	Use D3.js for full control
Real-world map apps	❌	Use Leaflet or MapLibre
Data-heavy 3D maps	❌	Use MapLibre

Migrate from react-simple-maps

@d3-maps/react is fully compatible with react-simple-maps, supports React 19 an has more features under the hood. See migration guide