The world as a lit 3D sphere — places, great-circle arcs, tinted regions — turning slowly while on screen, dragged by hand, in SVG without WebGL.

WebBêtaGraphiques

Web uniquement — React, depuis @krizaka/charts/globe. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

Deployment regions and their replication links, on a product or status page.
A global presence told at a glance, with a few places named.

Quand ne pas l’utiliser

Values to compare by country (half the globe is hidden).À la place : Geo map
More than a dozen places: the far side hides them.À la place : Geo map

Installation

Installer

npm install @krizaka/charts

Importer

import { Globe3D } from "@krizaka/charts/globe";

Exemples

Deployment regions

Orazaka's regions, their health as tones, the replication arcs between them.

Orazaka regions

Availability over 30 days · replication from Paris

Globe, 5. Paris · eu-west-3 99.98%, Frankfurt · eu-central-1 99.95%, Montréal · ca-central-1 99.91%, Virginia · us-east-1 99.62%, Singapore · ap-southeast-1 99.97%.

Orazaka regions — data
Region	Availability	lon	lat
Paris · eu-west-3	99.98%	2.35	48.86
Frankfurt · eu-central-1	99.95%	8.68	50.11
Montréal · ca-central-1	99.91%	-73.57	45.50
Virginia · us-east-1	99.62%	-77.46	38.95
Singapore · ap-southeast-1	99.97%	103.82	1.35

Props

The world as a lit sphere: deployment regions, the arcs between them, a slow turn.

Prop	Type	Défaut	Description
`points`requis	`readonly GlobePoint[]`	—	The places: deployment regions, data centres, audiences.
`title`requis	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`arcs`	`readonly GlobeArc[]`	—	Great-circle arcs between places: replication, traffic.
`autoRotate`	`boolean`	—	Turn slowly while on screen (never under reduced motion). Default true.
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`center`	`readonly [number, number]`	—	The longitude and latitude facing the reader at first. Default: the first point.
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the points' values are written.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`pointLabel`	`string`	—	The header of the places and of their values in the table.
`regions`	`readonly string[]`	—	Countries to tint in the accent (ISO alpha-2): where the service is available.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`valueLabel`	`string`	—	The header of the points' values (“Availability”).

Accessibilité

The turn runs only while the globe is on screen and the page visible, never under reduced motion, and stops on focus or drag.
The summary and the table list every place with its value and coordinates.
No WebGL: the sphere is SVG (an orthographic projection), sharp at any size and exportable.

Clavier

Touches	Action
`Arrow keys`	Walk the places: the globe turns to each one, which is announced.
`Home / End`	Jump to the first or the last place.
`Esc`	Clears the active place; the turn resumes.

Bonnes pratiques

Name the places as a reader knows them (“Paris · eu-west-3”); give their status a tone.
Keep autoRotate for a showcase; turn it off where the reader works.
Use regions for where the service is available, not for values.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Globe