A choropleth on real country outlines. Values keyed by ISO country code shade each country on one sequential ramp.
Usage
import { WorldMap } from "diagrammatic/world";
<WorldMap values={{ US: 412, DE: 198, IN: 231 }} />;WorldMap ships in its own entry, diagrammatic/world, because 166 country outlines outweigh every other chart combined; only the pages that draw a map load them. The geometry is pre-projected (Miller) and simplified offline, so the component runs no geo code at render time and stays a server component.
Examples
Values by country
values is keyed by ISO 3166-1 alpha-2 code. Each country shades from 10% to 95% of the accent by its share of the largest value; a country without a value draws as an outline only.
One scale across maps
max fixes the top of the ramp, so two maps side by side shade the same value the same way. Without it, each map scales to its own largest value.
Color and hover style
The ramp is the first categorical token, --dg-c1. Every country is a mark with data-series set to its code, so CSS can style hover or single countries out.
Interaction
Countries are addressed by code: a tooltip reads datum.series, and a highlight takes { series: "DE" } or a list of them.
Tooltip
The figure at the top of this page: highlightOnHover="series" plus a Tooltip that looks the country's name up in the exported WORLD list.
Highlight a region
A controlled highlight with a list of queries lights up a set of countries and fades the rest.
Pick a country
onMarkClick reports the clicked country's code.
Japan has 141 active workspaces. Click a country or pick one from the list.
Zoom
With a function child, Zoom hands the map a view window and the map redraws through it, so borders keep their hairline width at any magnification. Scroll to zoom, drag to pan, double-click to reset.
Related
- Dot world map draws the same countries as halftone dots, with groups and flows.
- Choropleth, Symbol map, Dot map, and Flow map draw on a tile grid in the main entry, which gives every region the same area.
Props
- values?Record<string, number>
Values keyed by ISO 3166-1 alpha-2 code. Countries without a value draw as outlines.
- max?number
The value that takes the darkest shade. Defaults to the largest value.
- 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`.
WORLD (every country's code, name, and path), WORLD_HEIGHT, and CENTROIDS are exported from diagrammatic/world for hosts drawing their own overlays.