WorldBubbleMap
ChartsProportional-circle world map — bubble area (sqrt-scaled) encodes a value.
Proportional-circle map. Bubble area (sqrt-scaled) encodes the value — perceptually more accurate than encoding by radius. Place bubbles either at a country centroid (pass id) or at an explicit longitude / latitude (pass coordinates).
Import
import { WorldBubbleMap } from "nosible-ux"Examples
Top 20 cities by population (millions)
Population
Bubbles by country centroid
Exports
Accessibility
Area (not radius) encodes magnitude for perceptual accuracy. Provide aria-label with the metric and unit. Bubble order draws large → small so smaller markers are not occluded.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Defines a string value that labels the current element. |
data | BubbleDatum[] | — | |
fill | string | undefined | — | Bubble fill colour. Default: Neo Green. |
fillOpacity | number | undefined | — | Fill opacity. Default: `0.55`. |
height | number | undefined | — | |
legendTitle | string | undefined | — | |
projection | WorldProjectionKind | undefined | — | |
radiusRange | [number, number] | undefined | — | `[min, max]` bubble radius in px. Default: `[3, 32]`. |
stroke | string | undefined | — | Bubble stroke colour. Default: Neo Green. |
unit | string | undefined | — | |
width | number | undefined | — | |
withLegend | boolean | undefined | — |