The world as a halftone field of dots. Countries color by named group, and flows draw as trails between countries.
- us-east
- eu-west
- ap-south
Usage
import { DotWorldMap } from "diagrammatic/world";
<DotWorldMap
groups={{ "us-east": ["US", "CA"], "eu-west": ["GB", "DE"] }}
flows={[{ from: "US", to: "GB" }]}
/>;Use it when the question is where, not how much: a footprint, a coverage map, a replication topology. For a value per country, use the World map.
Examples
A footprint
One group lights up a set of countries; every other country stays a faint dot.
Groups
groups maps a name to a list of country codes. Groups take the categorical palette in their key order. The map draws no legend of its own; put the DOM Legend above it with the same names, as the figure at the top does.
Flows
flows draws a lifted trail from one country to another, blending from the source group's color to the target's.
Animated flows
Put data-dg-motion on the map or any ancestor and each trail runs from source to target, so the direction reads without arrows. See Motion.
Interaction
Each country is a mark with data-series set to its code, and each flow carries its source in series and its target in series2, so one tooltip can describe both, as the figure at the top does.
Zoom
Props
- groups?Record<string, string[]>
Named sets of ISO 3166-1 alpha-2 codes, colored in key order.
- flows?{ from: string; to: string }[]
Trails between two countries, by code.
- title?string
Names the map for assistive technology.
- summary?string
A sentence read after the title.
- widthnumber= 640
Rendered width in CSS pixels.
- height?number
Rendered height in CSS pixels.
- aspect?number
Width over height when `height` is not given.
- view?{ x: number; y: number; w: number; h: number }
A window onto the map, from `Zoom`.