TopoJSON
導入方法
(1) 以下をインポートする(かダウンロードしてインポートする) <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
DataMaps
* ここからが本題
ライセンス
* MIThttps://github.com/markmarkoh/datamaps/blob/master/LICENSE
導入手順
https://github.com/markmarkoh/datamaps/blob/master/README.md#getting-startedを参考に。 1) D3.js と Topojson を以下のようにインポートする <script src="">http://d3js.org/d3.v3.js"> <script src="">http://d3js.org/topojson.v1.min.js"> 2) 以下から、datamaps.world.js をダウンロードし、インポートするhttps://github.com/markmarkoh/datamaps/tree/master/dist
or
https://github.com/markmarkoh/datamaps/blob/master/README.md
<script src="datamaps.world.js"></script>
3) 表示用タグを追加し、高さ・幅を指定する
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
4) Datamapを、3)のIDを引数に、Newする
<script>
var map = new Datamap({element: document.getElementById('container')});
</script>
サンプル
例： 世界地図を表示するだけ<!DOCTYPE html> <html> <head> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script src="">http://d3js.org/topojson.v1.min.js"> <script src="datamaps.world.js"></script> <div id="container" style="position: relative; width: 500px; height: 300px;"></div> <script> var map = new Datamap({element: document.getElementById('container')}); </script> </body> </html>
