GlobeChart

Live preview

Loading example…

The world as a globe (orthographic projection) you turn with the pointer or the arrow keys. Regions can be colored by value, markers sized by value and great-circle routes drawn over the surface. It fills its container as a disc, adapts to any width and keeps every interaction available without a pointer.

Import

import { GlobeChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/globe-chart.

Usage

<GlobeChart
  title="Pedidos por país"
  map={worldMap}
  data={orders}
  valueName="Pedidos"
  valueFormat="integer"
  scale="sequential"
  graticule
  graticuleStep={30}
  autoRotate={false}
  autoRotateSpeed={8}
  legend
  tooltip
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing and caption of the data table.
`map` *	`GeoMap`		Land to draw, e.g. `worldMap` from `@jcsoftdev/ui/charts/maps/data/world`.
`data`	`readonly ChoroplethDatum[]`	`[]`	Value per region (id or name); fills the land with a color scale.
`scale`	`"sequential" \| "diverging"`	`"sequential"`
`domain`	`readonly [number, number]`
`center`	`number`	`0`
`colors`	`ScaleColors`
`ranges`	`readonly ColorRange[]`
`valueFormat`	`ValueFormat`
`valueName`	`string`		Name of the value in the tooltip and the data table.
`points`	`readonly MapPoint[]`	`[]`	Markers on the surface, area-proportional when they carry a `value`.
`routes`	`readonly MapRoute[]`	`[]`	Great-circle arcs between places, lifted a little over the surface.
`minRadius`	`number`	`4`
`maxRadius`	`number`	`16`
`graticule`	`boolean`	`true`	Meridians and parallels.
`graticuleStep`	`number`	`30`	Degrees between graticule lines (30 by default).
`initialRotation`	`GlobeRotation`	`ROTATION_DEFAULT`	View center when the user has not turned the globe yet. Lima by default.
`rotation`	`GlobeRotation`		Controlled view center; combine with `onRotationChange`.
`onRotationChange`	`((rotation: GlobeRotation) => void)`
`autoRotate`	`boolean`	`false`	Slow idle spin that pauses while the pointer or focus is on the globe. Off under reduced motion.
`autoRotateSpeed`	`number`	`8`	Degrees per second of the idle spin.
`height`	`number \| "fill"`
`aspectRatio`	`number`
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`dataTable`	`"hidden"`		The numbers as a screen-reader table (always hidden visually).
`loading`	`boolean`
`labels`	`Partial<GlobeLabels>`
`onRegionClick`	`((region: { id: string; name: string; value: number \| null; }) => void)`
`onPointClick`	`((point: MapPoint) => void)`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/globe-chart/globe-chart.tsx