Get started

d3-maps is a set of components and helpers simplifying creating SVG maps with D3. Works with your favorite framework, batteries included

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')

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