Skip to main content

Globe charts and geographic data visualisation

The canvas-globe/charts entry point contains nine animated chart layers. They follow the same effect contract as the animation system and are installed with globe.use().

import { createGlobe } from "canvas-globe";
import { cartogramMorph, barRace } from "canvas-globe/charts";

const globe = createGlobe(document.querySelector("#globe"), {
  preset: "atlas",
});

const values = { IN: 1428, CN: 1410, US: 340, ID: 277 };
globe.use(cartogramMorph({ values, strength: 0.8 }));

Values can be keyed by ISO alpha-2 country code or country name. When a chart supports geographic values and no values are supplied, it derives a useful preview from the globe's markers.

Available charts​

ExportWhat it shows
tilegram()Countries arranged into an equal-area grid
chordDiagram()Weighted flows between regions
beeswarm()Geographic points moving into a distribution
barRace()Ranked values overtaking each other
dotDensity()Dots distributed within countries
cartogramMorph()Countries expanding toward a value
smallMultiples()A grid of maps for periods or categories
radarProfile()Several series across named axes
waffle()A unit grid for part-to-whole data

Example: dot-density map​

import { dotDensity } from "canvas-globe/charts";

globe.use(dotDensity({
  values: { IN: 1428, US: 340, BR: 216 },
  per: 20,
  color: "#67e8f9",
  seed: 42,
}));

The seed keeps the layout stable between renders. Chart animations also follow seek(), renderFrame(), and play(), which makes them suitable for export workflows.

Choosing a chart​

  • Use tilegram() or cartogramMorph() when area should represent value.
  • Use dotDensity() when viewers should see both quantity and location.
  • Use chordDiagram() for regional flow.
  • Use barRace() for changing rankings.
  • Use smallMultiples() when side-by-side comparison matters more than motion.
  • Use radarProfile() or waffle() for a focused overlay around the globe.

The chart module is about 4 KB gzipped and stays outside the core bundle.

Review pricing and production licensing.