I built d3-maps - a toolkit for interactive SVG maps with React and Vue support

Show and tell
1

It helps build choropleth maps, bubble maps, and other geographic data visualizations, using markers, connections, zoom & pan and more.

Reactive components, plain SVG and d3.js power without low-level wiring.

Features

  • Reactive rendering
  • Responsive by default
  • TopoJSON and GeoJSON support
  • Fully typed
  • SSR friendly
  • Lightweight and tree-shakable

Architecture

@d3-maps/core owns framework-agnostic complex logic. It hides interaction with d3 under the hood and provides simple API.

@d3-maps/react and @d3-maps/vue are adapters, they implement framework-specific integrations using core.

@d3-maps/atlas provides ready-to-use typed TopoJSON datasets: world, continents, countries, and more. It’s not bounded to core or adapters, and can be used standalone.

Usage

Here’s a brief snippet of a zoomable map using d3-maps. You can find more examples on docs website, link is below.

React

import { use } from 'react'
import { MapBase, MapFeatures, MapZoom } from '@d3-maps/react'

const worldPromise = import('@d3-maps/atlas/world/countries')
  .then((m) => m.default)

export function MapView() {
  const world = use(worldPromise)

  return (
    <MapBase>
      <MapZoom>
        <MapFeatures data={world} />
      </MapZoom>
    </MapBase>
  )
}

Vue

<script setup lang="ts">
import { MapBase, MapFeatures, MapZoom } from '@d3-maps/vue'

const world = await import('@d3-maps/atlas/world/countries/countries-110m')
  .then((m) => m.default)
</script>

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

Alternative to react-simple-maps

@d3-maps/react can fully replace react-simple-maps, supports React 19 an has more features under the hood. Migration guide is available on the docs site.

Links

Repo: GitHub - souljorje/d3-maps: Interactive SVG maps toolkit for React 19 and Vue 3. Choropleths, markers, routes, bubble and zoomable maps with components powered by d3.js · GitHub
Docs & Examples: https://d3-maps.netlify.app

I’d appreciate your star on Github and feedback in comments, thanks!