Maps

Datamaps

Interactive maps for data visualizations. Bundled into a single Javascript file.

Datamaps is intended to provide some data visualizations based on geographical data. It's SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library. Full documentation can be found: https://github.com/markmarkoh/datamaps

Basic example
var basic = new Datamap({    element: document.getElementById("basic_map"),    responsive: true,    fills: {        defaultFill: "#DBDAD6"    },    geographyConfig: {        highlightFillColor: '#1C977A',        highlightBorderWidth: 0,    },});
With selected regions
var basic = new Datamap({    element: document.getElementById("basic_map"),    ...    data: {        USA: { fillKey: "active" },        RUS: { fillKey: "active" },        DEU: { fillKey: "active" },        BRA: { fillKey: "active" }    }});
USA scope
var usa_map = new Datamap({    element: document.getElementById("usa_map"),    responsive: true,    scope: 'usa',    fills: {        defaultFill: "#DBDAD6"    },    geographyConfig: {        highlightFillColor: '#1C977A',        highlightBorderWidth: 0,    },    ...});
Map with arc
var arc_map = new Datamap({    element: document.getElementById("arc_map"),    ...});arc_map.arc([    { origin: 'USA', destination: 'RUS'},    { origin: 'USA', destination: 'DEU'},    { origin: 'USA', destination: 'POL'},    { origin: 'USA', destination: 'JAP'},    { origin: 'USA', destination: 'AUS'},    { origin: 'USA', destination: 'BRA'}],{ strokeColor: '#2BA587', strokeWidth: 1});