Globe Map Chart: A Spinning World from Your Rows

Globe map chart

The globe projection draws the built-in maps as the hemisphere facing the viewer, so the world looks like a world. It works with the choropleth, marker map and bubble map: far-side features are not drawn and cannot be hit, and land that crosses the horizon is cut cleanly at the edge. Drag to turn it, use the wheel to zoom, and set the starting centre. It can turn itself to the rows you select, and it can write the visible hemisphere into the grid as a filter, so every other view shows exactly the rows on the visible side.

Try it. Drag the globe to turn it, use the wheel to zoom, and select a row to turn it toward that office.

createChart({
  grid,
  container,
  type: 'markermap',
  lon: 'lng',
  lat: 'lat',
  label: 'site',
  value: 'users',
  shapes: world,
  projection: 'orthographic',
  rotate: [10, 30],
  graticule: true,
  fitTo: 'selection',
  title: 'Users by office',
});

Options used: projection: 'orthographic', rotate, graticule, fitTo

({
  columns: [
    { field: 'site', title: 'Office' },
    { field: 'lng', title: 'Longitude', type: 'number' },
    { field: 'lat', title: 'Latitude', type: 'number' },
    { field: 'users', title: 'Users', type: 'number' },
  ],
  rows: [
    ['London', -0.13, 51.51, 940], ['New York', -74.0, 40.71, 720], ['Sao Paulo', -46.63, -23.55, 410],
    ['Lagos', 3.38, 6.52, 260], ['Cape Town', 18.42, -33.92, 180], ['Dubai', 55.3, 25.2, 330],
    ['Mumbai', 72.88, 19.08, 520], ['Singapore', 103.82, 1.35, 450], ['Tokyo', 139.69, 35.68, 610],
    ['Sydney', 151.21, -33.87, 300],
  ].map(([site, lng, lat, users], i) => ({ id: i, site, lng, lat, users })),
})