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

Basic usage

1. Get data

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

2. Pass the data to the Map

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

<template>
  <Map :data="data">
    <MapFeatures />
  </Map>
</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.