INSPINIA | Datamaps

## Maps

##### Datamaps

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