Datamaps

Datamaps

数据可视化交互式地图。捆绑成一个单一的JavaScript文件。

Datamaps 旨在提供一些基于地理数据的数据可视化。它是基于SVG的,可以扩展到任何尺寸的屏幕,包括脚本文件在内的一切。它紧密依赖于d3.js图书馆。 完整文档在这儿: 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}
);