Create world map charts with svgMap

svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.

Install

npm install svgmap

Or download at github.com/StephanWagner/svgMap.

Usage

Include or require svgMap.min.js and you are ready to go:

<div id="svgMap"></div>
new svgMap({
  targetElementID: 'svgMap',
  data: {
    gdp: {
      name: 'GDP per capita',
      format: '{0} USD',
      thousandSeparator: ',',
      thresholdMax: 50000,
      thresholdMin: 1000
    },
    change: {
      name: 'Change to year before',
      format: '{0} %'
    }
  },
  applyData: 'gdp',
  values: {
    AF: {gdp: 587, change: 4.73},
    AL: {gdp: 4583, change: 11.09},
    DZ: {gdp: 4293, change: 10.01}
    // ...
  }
});

This example code creates a world map with the GDP per capita and its change to the previous year:

Options

You can pass the following options into svgMap:

targetElementID string The ID of the element where the world map will render
Required
minZoom
maxZoom
float Minimal and maximal zoom level between 1 and 10
Default: 1 for minZoom, 10 for maxZoom
initialZoom float Initial zoom level between 1 and 10
Default: 1.06
zoomScaleSensitivity float Sensitivity when zooming
Default: 0.2
mouseWheelZoomEnabled boolean Enables or disables zooming with the scroll wheel
Default: true
colorMax
colorMin
colorNoData
string The color values in hex for highest value colorMax, lowest value colorMin and no data available colorNoData
Default: #CC0033 for colorMax, #FFE5D9 for colorMin, #E2E2E2 for colorNoData
flagType emoji, image The type of the flag in the tooltip
Default: image
flagURL string The URL to the flags when using flag type image. The placeholder {0} will get replaced with the lowercase ISO 3166-1 alpha-2 country code
Default: https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg
data: {
  // ...
}
The chart data to use for coloring and to show in the tooltip. Use a unique data-id as key and provide following options as value:
↳ name string The name of the data, it will be shown in the tooltip
↳ format string The format for the data value, {0} will be replaced with the actual value
↳ thousandSeparator string The character to use as thousand separator
↳ thresholdMax number Maximal value to use for coloring calculations
↳ thresholdMin number Minimum value to use for coloring calculations
applyData string The ID (key) of the data that will be used for coloring
values object An object with the ISO 3166-1 alpha-2 country code as key and the chart data for each country as value
countryNames object An object with the ISO 3166-1 alpha-2 country code as key and the country name as value

Localize

Use the option countryNames to translate country names. In the folder local you can find translations in following languages:
Arabic, Chinese, English, French, German, Hindi, Portuguese, Russian, Spanish, Urdu

To create your own translations, check out country-list by Saša Stamenković.

Attribution

If you need more detailed maps or more options for your data, there is a great open source project called datawrapper out there, with a lot more power than svgMap.

svgMap uses svg-pan-zoom by Anders Riutta.

The country flag images are from country-flags by Hampus Nilsson.

Most data in the demos was taken from Wikipedia.