Introduction

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

Architecture

Core provides framework-agnostic complex logic (you won't see it)

• Context creation, data transformation
• Map layers types and models: features, markers, zoom, etc
• Utilities for custom layers: choropleth, bubble, etc

Adapters implement the core in a simple way (you'll see it)

• Vue and React bindings (Solid and Svelte coming soon)
• Rendering and reactivity integration
• Declarative components and composables

Installation

npm install @d3-maps/vue

CDN support

• jsDelivr and UNPKG support package-root script URLs for @d3-maps/core, @d3-maps/react, and @d3-maps/vue
• @d3-maps/react and @d3-maps/vue browser bundles already include @d3-maps/core, so you only need the framework runtime plus the adapter script
• browser styles are available from the adapter packages at @d3-maps/react/index.css and @d3-maps/vue/index.css
• esm.sh and Skypack use the package ESM entrypoints, so prefer package-root imports there
• cdnjs is not an npm mirror, so publishing to npm does not make @d3-maps/* available there automatically

Basic usage

1. Get data

import '@d3-maps/vue/index.css'
import type { MapData } from '@d3-maps/vue'
const data: MapData = await fetch('/some-topojson.json').then((res) => res.json())

2. Pass the data to MapBase

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

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

3. Your first map is ready

Next

Learn core concepts to understand how d3-maps works step by step: data, projection, zoom, markers and more.