Map Using D3 Projections

One world map, 102 projections. The Projection list holds the projections of the d3-geo-projection library: pick one, or step through them with the arrows.

Try it:
Drag to turn the world

Theme

Dark

Projection

Tilt

Ocean color

Ocean opacity

Land color

Grid opacity

Make your own map

Get the code JavaScript React, Vue, Angular, Svelte

About this map

Picking a projection

Every flat map distorts the globe, and the projection decides how. Equal-area ones like Mollweide keep sizes true, Mercator keeps shapes, and compromises like Robinson or Winkel Tripel balance the two. A map chart takes any d3 projection, so stepping through this list is a quick way to find the one your data needs.

Good for

Choosing a projection for a new map
Teaching how projections distort the world
Special views: polar, interrupted or regional

Think twice when

A finished map: the built-in projections need no extra scripts
Comparing country sizes: avoid Mercator
Data for one region: a projection centered on it

For developers

Get the code.

Built with amCharts 5, a JavaScript library. The code includes your theme and renderer (canvas or SVG), but not the changes you make with the controls.

Docs:Using D3 projections Projections Graticule series Background polygon

For projects that use npm: npm install @amcharts/amcharts5 and @amcharts/amcharts5-geodata. See Getting started. The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code.
How it reads: "type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".

// Create root element
// https://docs.amcharts.com/v5/getting-started/#root-element
var root = am5.Root.new("chartdiv");

// Set themes
// https://docs.amcharts.com/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Colors from the theme, so the map follows the theme
var colors = am5.ColorSet.new(root, {});

// Create the map chart
// https://docs.amcharts.com/v5/charts/map-chart/
var chart = root.container.children.push(am5map.MapChart.new(root, {
  minZoomLevel: 0.5, // can zoom out to half the fitted size
  // go to the home view once the map is fitted
  autoHome: true,
  panX: "rotateX", // dragging sideways turns the globe...
  panY: "none",    // ...but not up and down
  // the home view is the map straight, untilted: the home button turns it back
  homeRotationX: 0,
  homeRotationY: 0,
  // the first projection of the list; the others come from d3-geo-projection
  projection: d3.geoAiry()
}));

// Add zoom control
// https://docs.amcharts.com/v5/charts/map-chart/map-pan-zoom/#zoom-control
var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {})); // + and - zoom buttons

// the home button is hidden by default
zoomControl.homeButton.set("visible", true);

// Create series for the ocean: a rectangle around the whole world shows the
// outline of each projection
// https://docs.amcharts.com/v5/charts/map-chart/map-polygon-series/#background-polygon
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));

backgroundSeries.mapPolygons.template.setAll({
  fill: colors.getIndex(0), // the theme's first color...
  fillOpacity: 0.12,        // ...as a light tint
  strokeOpacity: 0          // no outline
});

backgroundSeries.data.push({
  geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});

// Create graticule series
// https://docs.amcharts.com/v5/charts/map-chart/graticule-series/
var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {})); // lines every 10 degrees

graticuleSeries.mapLines.template.setAll({
  stroke: root.interfaceColors.get("alternativeBackground"), // contrasting with the background...
  strokeOpacity: 0.1 // ...and faint
});

// Create main polygon series for countries
// https://docs.amcharts.com/v5/charts/map-chart/map-polygon-series/
var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
  geoJSON: am5geodata_worldLow // the world's countries, in low detail
}));

polygonSeries.mapPolygons.template.setAll({
  fill: am5.Color.lighten(colors.getIndex(0), 0.3) // the land in the theme's first color, lightened 30%
});