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

var basic = new Datamap({
    element: document.getElementById("basic_map"),
    responsive: true,
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
}); 

var basic = new Datamap({
    element: document.getElementById("basic_map"),
    ...
    data: {
        USA: { fillKey: "active" },
        RUS: { fillKey: "active" },
        DEU: { fillKey: "active" },
        BRA: { fillKey: "active" }
    }
}); 

var usa_map = new Datamap({
    element: document.getElementById("usa_map"),
    responsive: true,
    scope: 'usa',
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
    ...
}); 

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}
);