DataMaps Plugin
[1] デフォルトで配備されているプラグイン 1-1) bubbles : バブル チャート 1-2) legend : 凡例(マウスオーバー時のダイアログが表示) 1-3) arc : arc(アーク) = 弓型(フライトで飛行場から飛行場に表示されるのに使われる？） 1-4) labels : 地図上に国・地域コードが表示 1-5) graticule : 正距方位図法？http://datamaps.github.io/old.html
https://github.com/markmarkoh/datamaps/blob/master/README.md
[2] 独自のプラグインhttp://datamaps.markmarkoh.com/creating-a-datamaps-plugin/
サンプル
http://jsbin.com/abeXErat/1/edit?html,output
サンプル
[1] デフォルトで配備されているプラグイン
例1-1： bubbles<!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: 1000px; height: 800px;"></div> <script> var bombMap = new Datamap({ element: document.getElementById('container'), scope: 'world', geographyConfig: { popupOnHover: false, highlightOnHover: false }, fills: { 'JPN': 'orange', defaultFill: 'blue' }, data: { 'JPN': {fillKey: 'JPN'} } }); var bombs = [{ name: 'Tokyo', city: 'Tokyo', yield: 50000, country: 'Japan', fillKey: 'JPN', latitude: 35.686533327621, longitude: 139.69192653894 } ]; //draw bubbles for bombs bombMap.bubbles(bombs, { popupTemplate: function (geo, data) { return ['<div class="hoverinfo">' + data.name, '<br/>Capital city: ' + data.city, '<br/>Country: ' + data.country + '', '</div>'].join(''); } }); </script> </body> </html>例1-2：legend
<!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: 1000px; height: 800px;"></div> <script> var map = new Datamap({ scope: 'world', element: document.getElementById('container'), geographyConfig: { highlightOnHover: false, popupTemplate: function(geography, data) { if (data === null) { return ''; } return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong> <br />Templature :' + data.Templature + ' </div>' }, highlightBorderWidth: 3 }, fills: { 'JPN': 'orange', defaultFill: 'blue' }, data:{ "JPN": { "fillKey": "JPN", "Templature": 15 }, } }); map.legend(); </script> </body> </html>例1-3： arc
<!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: 1000px; height: 800px;"></div> <script> var election = new Datamap({ scope: 'world', element: document.getElementById('container'), projection: 'mercator' }); var dataset = [ { origin: { latitude: 35.686533327621, longitude: 139.69192653894 }, destination: { latitude: 32.066667, longitude: 34.783333 } }, { origin: { latitude: 35.686533327621, longitude: 139.69192653894 }, destination: { latitude: 59.95 , longitude: 30.3 } } ]; election.arc(dataset, {strokeWidth: 2}); </script> </body> </html>例1-4： labels
<!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: 1000px; height: 800px;"></div> <script> var map = new Datamap({ scope: 'world', element: document.getElementById('container'), projection: 'mercator' }); map.labels({labelColor: 'blue', fontSize: 12}); </script> </body> </html>例1-5： graticule
<!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: 1000px; height: 800px;"></div> <script> var map = new Datamap({ scope: 'world', element: document.getElementById('container'), projection: 'orthographic', fills: { defaultFill: 'rgba(0,0,0,0.7)', lt50: 'rgba(0,244,244,0.9)', gt50: 'red' }, projectionConfig: { rotation: [220, 350] }, data: { '071': {fillKey: 'lt50' }, '001': {fillKey: 'gt50' } } }); map.graticule(); </script> </body> </html>
