d3-maps: a toolkit for interactive SVG maps for React and Vue

#opensource #react #vue #d3js

Crafting maps with d3.js is often requires a lot of boilerplate around data, config, and rendering.

I built d3-maps to make it simple. Reactive components, plain SVG and d3.js power without low-level wiring.

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

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: continents, countries, and more. It's not bounded to core or adapters, and can be used standalone.

Usage

I'll show a brief snippet how to build 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'
import type { MapData } from '@d3-maps/react'

const mapDataPromise = import('@d3-maps/atlas/world/countries')
  .then(({ default: world }) => world as MapData)

export function MapView() {
  const data = use(mapDataPromise)

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

Vue

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

const { default: data } = await import(
  '@d3-maps/atlas/world/countries/countries-110m',
) as { default: MapData }
</script>

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