var dataSet = [
["大陸地區",101,"上海交通大學",65,"http://www.sjtu.edu.cn/"],
["大陸地區",101,"北京大學",82,"http://www.pku.edu.cn/"],
["大陸地區",101,"廈門大學",40,"http://www.xmu.edu.cn/"],
["日本",101,"大阪大學",35,"http://www.osaka-u.ac.jp/"],
["日本",101,"立命館大學",32,"http://www.ritsumei.jp/index_j.html"],
["日本",101,"東北大學",30,"http://www.tohoku.ac.jp/en/"],
["美國",101,"加州大學柏克萊分校",63,"http://www.berkeley.edu/"],
["美國",101,"史丹福大學",56,"http://www.stanford.edu/"],
["美國",101,"西來大學",45,"http://www.uwest.edu/site/"],
["大韓民國(南韓)",101,"東亞大學",25,"http://www.donga.ac.kr/"],
["大韓民國(南韓)",101,"成均館大學",24,"http://www.skku.edu/index_pc.jsp"],
["大韓民國(南韓)",101,"又松大學",22,"http://www.wsu.ac.kr/site/main/intro/intro.html"],
["德意志聯邦共和國",101,"海德堡大學",51,"http://www.uni-heidelberg.de/"],
["德意志聯邦共和國",101,"漢堡大學",29,"http://www.uni-hamburg.de/"],
["德意志聯邦共和國",101,"柏林自由大學",19,"http://www.fu-berlin.de/"],
["法國",101,"里爾天主教大學",34,"http://www.univ-catholille.fr/"],
["法國",101,"里昂大三大學",23,"http://www.univ-lyon3.fr/"],
["法國",101,"特魯瓦高等商學院",11,"http://www.educations.com/study-abroad/groupe-esc-troyes-school-of-management/"],
["英國",101,"牛津大學哈福特學院",39,"http://www.ox.ac.uk/"],
["英國",101,"北安普頓大學",13,"http://www.northampton.ac.uk/"],
["英國",101,"愛丁堡大學",10,"http://www.ed.ac.uk/home"],
["荷蘭王國",101,"烏特列茲大學",25,"http://www.uu.nl/"],
["荷蘭王國",101,"葛洛寧恩大學",21,"http://www.rug.nl/"],
["荷蘭王國",101,"萊登大學",8,"http://www.leidenuniv.nl/"],
["捷克共和國",101,"布爾諾科技大學",18,"https://www.vutbr.cz/en/"],
["捷克共和國",101,"捷克科技大學",11,"http://www.cvut.cz/"],
["捷克共和國",101,"哈德克.卡爾威大學",8,"https://www.uhk.cz/en-GB/UHK"],
["加拿大",101,"漢堡學院",15,"http://www.humber.ca/"],
["加拿大",101,"布洛克大學",11,"http://www.brocku.ca/"],
["加拿大",101,"維多利亞大學",10,"http://www.uvic.ca/"],
["瑞典王國",101,"林雪平大學",20,"http://www.liu.se/?l=en"],
["瑞典王國",101,"皇家理工學院",12,"http://www.kth.se/"],
["瑞典王國",101,"查爾默大學",10,"http://www.chalmers.se/en/Pages/default.aspx"],
["澳大利亞",101,"迪肯大學",15,"http://www.deakin.edu.au/"],
["澳大利亞",101,"昆士蘭大學",10,"http://www.uq.edu.au/"],
["澳大利亞",101,"昆士蘭科技大學",8,"https://www.qut.edu.au/"],
["香港",101,"香港中文大學",26,"http://www.cuhk.edu.hk/chinese/"],
["香港",101,"香港城市大學",15,"http://www.cityu.edu.hk/cityu/index-tc.htm"],
["香港",101,"樹仁大學",12,"http://www.hksyu.edu/"],
["西班牙王國",101,"馬德里自治大學",9,"http://www.uam.es/ss/Satellite/es/home/"],
["西班牙王國",101,"納瓦拉大學",8,"http://www.unav.edu/web/biblioteca"],
["西班牙王國",101,"卡斯提亞拉曼查大學",7,"https://www.uclm.es/english/"],
["奧地利共和國",101,"林茲大學",20,"http://www.jku.at/content"],
["奧地利共和國",101,"茵斯堡大學",15,"http://www.uibk.ac.at/"],
["奧地利共和國",101,"維也納大學",8,"http://www.univie.ac.at/"],
["泰王國(泰國)",101,"湄州大學",7,"http://www.mju.ac.th/about/mju-about-2004/INDEX.html"],
["泰王國(泰國)",101,"曼谷大學",6,"http://www.bu.ac.th/tha/"],
["泰王國(泰國)",101,"清邁大學",6,"http://www.cmu.ac.th/"],
["新加坡共和國",101,"南洋理工大學",19,"http://www.ntu.edu.sg/Pages/home.aspx"],
["新加坡共和國",101,"新加坡國立大學",18,"http://www.nus.edu.sg/"],
["新加坡共和國",101,"新加坡管理大學",7,"http://www.smu.edu.sg/"],
["馬來西亞",101,"馬來亞大學",13,"https://www.um.edu.my/"],
["馬來西亞",101,"馬來西亞新紀元學院",7,"http://www.newera.edu.my/"],
["馬來西亞",101,"馬來西亞理工大學(UTM)",2,"http://www.utm.my/"],
["芬蘭共和國",101,"阿爾托大學",13,"http://www.aalto.fi/fi/"],
["芬蘭共和國",101,"拉瑞爾科技應用大學",4,"https://www.laurea.fi/"],
["芬蘭共和國",101,"坦佩利大學",3,"http://www.uta.fi/en/"],
["菲律賓共和國",101,"馬尼拉安特雷歐大學",14,"http://www.ateneo.edu/"],
["菲律賓共和國",101,"瑪布阿科學技術學院",10,"http://www.mapua.edu.ph/"],
["菲律賓共和國",101,"新英格蘭大學",10,"http://www.une.edu.au/"],
["大陸地區",102,"復旦大學",99,"http://www.fudan.edu.cn/index.html"],
["大陸地區",102,"同濟大學",93,"http://www.tongji.edu.cn/"],
["大陸地區",102,"南京大學",84,"http://www.nju.edu.cn/"],
["日本",102,"大阪大學",31,"http://www.osaka-u.ac.jp/"],
["日本",102,"早稻田大學",27,"http://www.waseda.jp/top/en"],
["日本",102,"同志社大學",23,"https://www.doshisha.ac.jp/"],
["日本",102,"東北大學",23,"http://www.tohoku.ac.jp/en/"],
["美國",102,"西來大學",35,"http://www.uwest.edu/site/"],
["美國",102,"天普大學",26,"http://www.temple.edu/"],
["美國",102,"波莫納加州州立理工大學",19,"http://www.cpp.edu/"],
["大韓民國(南韓)",102,"梨花女子大學",23,"http://www.ewha.ac.kr/mbs/ewhakr/index.jsp"],
["大韓民國(南韓)",102,"首爾教育大學",23,"http://www.snue.ac.kr/index_intro.jsp"],
["大韓民國(南韓)",102,"成均館大學",22,"http://www.skku.edu/index_pc.jsp"],
["德意志聯邦共和國",102,"杜賓根大學",21,"http://www.uni-tuebingen.de/"],
["德意志聯邦共和國",102,"慕尼黑工業大學",16,"http://www.tum.de/"],
["德意志聯邦共和國",102,"曼漢姆大學",11,"http://www.uni-mannheim.de/1/"],
["法國",102,"里昂第三大學",21,"http://www.univ-lyon3.fr/"],
["法國",102,"法國雷恩商學院",18,"https://www.esc-rennes.fr/"],
["法國",102,"巴黎高等政治學院",10,"http://www.sciencespo.fr/"],
["英國",102,"英國劍橋大學",25,"http://www.cam.ac.uk/"],
["英國",102,"曼徹斯特大學",12,"http://www.manchester.ac.uk/"],
["英國",102,"英國女皇大學",8,"http://www.qub.ac.uk/"],
["荷蘭王國",102,"荷蘭萊頓大學",21,"http://www.leidenuniv.nl/"],
["荷蘭王國",102,"葛洛寧恩大學",18,"http://www.rug.nl/"],
["荷蘭王國",102,"鹿特丹管理學院",7,"http://www.rsm.nl/home/"],
["泰國",102,"湄州大學",6,"http://www.mju.ac.th/about/mju-about-2004/INDEX.html"],
["泰國",102,"清邁皇家大學",4,"http://www.satitschool.cmru.ac.th/"],
["泰國",102,"曼谷大學",3,"http://www.bu.ac.th/tha/"],
["西班牙",102,"胡安卡洛斯國王大學",7,"http://www.urjc.es/"],
["西班牙",102,"瓦倫西亞科技大學",7,"http://www.upv.es/"],
["西班牙",102,"哈恩大學",6,"http://www10.ujaen.es/"],
["芬蘭",102,"阿爾托大學",18,"http://www.aalto.fi/fi/"],
["芬蘭",102,"拉瑞爾科技應用大學",6,"https://www.laurea.fi/"],
["芬蘭",102,"育華斯基里拉大學 ",4,"https://www.jyu.fi/en/"],
["香港",102,"香港中文大學",23,"http://www.cuhk.edu.hk/chinese/"],
["香港",102,"香港城市大學",17,"http://www.cityu.edu.hk/cityu/index-tc.htm"],
["香港",102,"香港大學",16,"https://www.hku.hk/c_index.html"],
["捷克共和國",102,"捷克科技大學",18,"http://www.cvut.cz/"],
["捷克共和國",102,"奧斯特拉瓦科技大學",11,"https://www.vsb.cz/en"],
["捷克共和國",102,"布爾諾科技大學",10,"https://www.vutbr.cz/en/"],
["比利時",102,"天主教魯汶大學",11,"http://www.uclouvain.be/index.html"],
["比利時",102,"布魯塞爾自由大學",8,"http://www.ulb.ac.be/"],
["比利時",102,"安特衛普大學",6,"https://www.uantwerpen.be/nl/"],
["加拿大",102,"漢堡學院",15,"http://www.humber.ca/"],
["加拿大",102,"紐芬蘭紀念大學",13,"http://www.mun.ca/"],
["加拿大",102,"不列顛哥倫比亞大學",12,"http://www.ubc.ca/"],
["馬來西亞",102,"馬來亞大學",26,"https://www.um.edu.my/"],
["馬來西亞",102,"雙威大學",12,"http://www.sunway.edu.my/"],
["馬來西亞",102,"新紀元學院",7,"http://www.newera.edu.my/"],
["奧地利",102,"林茲大學",20,"http://www.jku.at/content"],
["奧地利",102,"茵斯堡大學",17,"http://www.uibk.ac.at/"],
["奧地利",102,"約翰克卜勒大學",5,"http://www.jku.at/content"],
["新加坡共和國",102,"南洋理工大學",22,"http://www.ntu.edu.sg/Pages/home.aspx"],
["新加坡共和國",102,"新加坡國立大學",19,"http://www.nus.edu.sg/"],
["新加坡共和國",102,"新加坡管理大學",9,"http://www.smu.edu.sg/"],
["瑞典",102,"林雪平大學",22,"http://www.liu.se/?l=en"],
["瑞典",102,"查默斯理工大學",18,"http://www.chalmers.se/en/Pages/default.aspx"],
["瑞典",102,"哈勒姆斯塔德大學",7,"http://www.hh.se/"],
["澳大利亞",102,"昆士蘭科技大學",13,"https://www.qut.edu.au/"],
["澳大利亞",102,"新南威爾斯大學",13,"https://www.unsw.edu.au/"],
["澳大利亞",102,"格里菲斯大學",10,"https://www.griffith.edu.au/"],
["大陸地區",103,"復旦大學",67,"http://www.fudan.edu.cn/index.html"],
["大陸地區",103,"南京大學",56,"http://www.nju.edu.cn/"],
["大陸地區",103,"北京大學",47,"http://www.pku.edu.cn/"],
["日本",103,"東北大學",22,"http://www.tohoku.ac.jp/en/"],
["日本",103,"大阪大學",21,"http://www.osaka-u.ac.jp/ja"],
["日本",103,"北海道大學",17,"http://www.hokudai.ac.jp/"],
["美國",103,"西來大學",18,"http://www.uwest.edu/site/"],
["美國",103,"印第安纳大學-普渡大學維恩堡分校",14,"https://www.ipfw.edu/"],
["美國",103,"天普大學",13,"http://www.temple.edu/"],
["南韓",103,"梨花女子大學",19,"http://www.ewha.ac.kr/mbs/ewhakr/index.jsp"],
["南韓",103,"中央大學",13,"http://www.cau.ac.kr/index.php"],
["南韓",103,"東亞大學",12,"http://www.donga.ac.kr/"],
["德國",103,"曼漢姆大學",16,"http://www.uni-mannheim.de/1/"],
["德國",103,"杜賓根大學",12,"http://www.uni-tuebingen.de/"],
["德國",103,"福茲堡應用科技大學",7,"http://www.fhws.de/"],
["法國",103,"里昂第三大學",15,"http://www.univ-lyon3.fr/"],
["法國",103,"里爾天主教大學",12,"http://www.univ-catholille.fr/"],
["法國",103,"特魯瓦高等商學院",9,"http://www.utt.fr/fr/index.html"],
["加拿大",103,"曼尼托巴大學",15,"http://umanitoba.ca/"],
["加拿大",103,"漢堡學院",10,"http://www.humber.ca/"],
["加拿大",103,"西門菲沙大學",6,"http://www.sfu.ca/"],
["荷蘭",103,"葛洛寧恩大學",10,"http://www.rug.nl/gradschooleb/index"],
["荷蘭",103,"萊登大學",9,"http://www.leidenuniv.nl/"],
["荷蘭",103,"漢斯應用科技大學",5,"https://www.hanze.nl/eng/"],
["英國",103,"蘭卡斯特大學",5,"http://www.lancaster.ac.uk/"],
["英國",103,"倫敦政經學院",4,"http://www.lse.ac.uk/home.aspx"],
["英國",103,"桑德蘭大學",4,"http://www.sunderland.ac.uk/"],
["西班牙",103,"瓦倫西亞科技大學",6,"http://www.upv.es/"],
["西班牙",103,"薩拉曼卡大學",6,"http://www.usal.es/webusal/"],
["西班牙",103,"哈恩大學",5,"http://www10.ujaen.es/"],
["香港",103,"香港城市大學",14,"http://www.cityu.edu.hk/cityu/index-tc.htm"],
["香港",103,"香港中文大學",12,"http://www.cuhk.edu.hk/chinese/"],
["香港",103,"香港大學",9,"https://www.hku.hk/c_index.html"],
["奧地利共和國",103,"林茲大學",11,"http://www.jku.at/content"],
["奧地利共和國",103,"茵斯堡大學",7,"http://www.uibk.ac.at/"],
["奧地利共和國",103,"維也納大學",6,"http://www.univie.ac.at/"],
["瑞典",103,"林雪平大學",11,"http://www.liu.se/?l=en"],
["瑞典",103,"哈勒姆斯塔德",7,"http://www.hh.se/"],
["瑞典",103,"查默斯理工大學",6,"http://www.chalmers.se/en/Pages/default.aspx"],
["澳大利亞",103,"昆士蘭科技大學",10,"https://www.qut.edu.au/"],
["澳大利亞",103,"南天大學",4,"http://www.nantien.edu.au/"],
["澳大利亞",103,"昆士蘭大學",3,"http://www.uq.edu.au/"],
["新加坡共和國",103,"新加坡國立大學",11,"http://www.nus.edu.sg/"],
["新加坡共和國",103,"南洋理工大學",9,"http://www.ntu.edu.sg/Pages/home.aspx"],
["新加坡共和國",103,"新加坡管理大學",7,"http://www.smu.edu.sg/"],
["波蘭",103,"華沙經濟大學",5,"http://www.sgh.waw.pl/index_en.html"],
["波蘭",103,"華沙大學",4,"http://www.uw.edu.pl/"],
["波蘭",103,"亞捷隆大學",4,"http://www.uj.edu.pl/"],
["芬蘭",103,"阿爾托大學",6,"http://www.aalto.fi/fi/"],
["芬蘭",103,"JAMK應用科技大學",3,"www.jamk.fi/fi/Etusivu"],
["芬蘭",103,"于韋斯屈萊大學",3,"https://www.jyu.fi/"],
["瑞士",103,"蘇黎世應用科學大學",8,"http://www.sml.zhaw.ch/en"],
["瑞士",103,"聖加崙大學",4,"http://www.unisg.ch/"],
["瑞士",103,"蘇黎世大學",3,"http://www.uzh.ch/index.html"],
["瑞士",103,"洛桑大學",3,"http://www.unil.ch/index.html"],
["馬來西亞",103,"馬來亞大學",21,"https://www.um.edu.my/"],
["馬來西亞",103,"拉曼大學",1,"http://www.tarc.edu.my/"]
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
"columnDefs": [
{ "visible": false }
],
"scrollY": "600px",
"scrollCollapse": true,
"paging": false,
"order": [[ 2, 'asc' ]],
columns: [
{ title: "國家" },
{ title: "年度" },
{ title: "學校" },
{ title: "人數" },
{ title: "網址" }
]
} );
} );
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<style>
body{
font-family: "Helvetica Neue";
}
.baseMap{
stroke-width:0.8px;
stroke:#555;
fill:#555;
opacity:0.5;
}
.globe {
fill: #000;
}
.cities_end{
/*fill:rgba(29, 168, 183, .5);*/
fill:rgba(230, 255, 0, 0.5);
/* 254*/
/* fill:none;*/
stroke-width: 1;
stroke: white;
/* fill:none;*/
}
.line{
stroke:rgba(230, 255, 0, 0.8);
/* stroke:rgba(253,141,3,.3);*/
stroke-width:1.5px;
fill:none;
}
.geo-globe {
fill: rgba(236,249,255,0.8);
/* fill:white;*/
}
.years{
font-size:18px;
font-weight: 600;
font-family: "Helvetica Neue";
fill:black;
opacity: 0.8;
}
.country{
font-size:15px;
font-family: "Helvetica Neue";
fill:black;
opacity: 0.7;
}
.maps{
width: 100%;
max-width: 400px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
margin-left: 50px;
}
@media (max-width: 600px) {
.maps {
margin-left: 0px;
}
}
table{
font-family: "新細明體";
}
/*div {
outline: 1px solid black;
}
svg {
outline: 1px solid orange;
position: absolute;
top: 0;
left: 0;
}
g {
outline: 1px solid red;
}*/
.title{
text-align: center;
}
h1{
font-size: 50px;
margin-top: 10px;
/* color:rgb(33, 113, 181);*/
color:#333333;
}
h3{
font-weight: 500;
margin-top: -20px;
color:#333333;
opacity:0.8;
font-size: 15px;
}
.table{
max-width: 1200px;
margin:auto;
font-size: .9em;
color:#333333;
}
a{
background-color: rgba(230, 255, 0, 0.5);
text-decoration: none;
color:black;
}
a:hover{
background-color: rgba(255,179,213,0.4);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
</style>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<h1 class = "title">台灣交換學生資料庫</h1>
<h3 class = "title">民國101至103年台灣交換學生資料,使用者可以移動滑鼠與拖曳地球儀查看詳細資料,<br>也可以利用下方資料庫內進行進階搜尋。資料來源來自教育部。製作人<a href="https://twitter.com/Jeremy_CF_Lin" target="_blank">Jeremy C.F. Lin</a>,<br>與台灣<a href="//comm.nccu.edu.tw/index.php" target="_blank">政治大學傳播學院</a>一同合作。</h3>
<div id="main-wrapper" class="">
<div id="main-content" class="container">
<div class="row">
<div id ='map' class="maps col-lg-2"></div>
<div id ='map2' class="maps col-lg-2"></div>
<div id ='map3' class="maps col-lg-2"></div>
</div>
<div class ="row">
<div class="table">
<table id="example" class="display " width="100%"></table>
</div>
</div>
</div>
</div>
<script>
$(".maps").css("height", $("#map").outerWidth() + "px");
var margin = {
top: 15,
right: 20,
bottom: 15,
left: 0
},
width = $(".maps").outerWidth() - margin.left - margin.right,
height = $(".maps").outerHeight() - margin.top - margin.bottom;
//This is the project for the globe
var projection = d3.geo.orthographic()
.scale(height / 2)
.translate([width / 2, height / 2])
.clipAngle(90)
.precision(0.5);
var path = d3.geo.path()
.projection(projection)
.pointRadius(function(d) {
//This is where we set circle radius to show count of attendees
if (d.count) {
return Math.sqrt(d.count / Math.PI) * 1.3;
}
});
var svg = d3.select("#map").append('svg')
// d3.select('#map').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'graph-svg-component')
.call(responsivefy) // Call function responsivefy to make the graphic reponsive according to the window width/height
.append('g')
.attr("class", "globe-g")
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var svg2 = d3.select("#map2").append('svg')
// d3.select('#map').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'graph-svg-component')
.call(responsivefy) // Call function responsivefy to make the graphic reponsive according to the window width/height
.append('g')
.attr("class", "globe-g")
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var svg3 = d3.select("#map3").append('svg')
// d3.select('#map').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'graph-svg-component')
.call(responsivefy) // Call function responsivefy to make the graphic reponsive according to the window width/height
.append('g')
.attr("class", "globe-g")
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var globe = svg.selectAll('path.globe').data([{
type: 'Sphere'
}])
.enter().append('path')
.attr('class', 'globe')
.attr('d', path);
var globe2 = svg2.selectAll('path.globe').data([{
type: 'Sphere'
}])
.enter().append('path')
.attr('class', 'globe')
.attr('d', path);
var globe3 = svg3.selectAll('path.globe').data([{
type: 'Sphere'
}])
.enter().append('path')
.attr('class', 'globe')
.attr('d', path);
queue()
.defer(d3.json, 'world_countries.json')// load geojson/topojson data
.defer(d3.csv, 'exchange_student.csv')
.await(ready);
function ready(error, world, data) {
if (error) throw error;
data.forEach(
function(d) {
d.end_lat = +d.end_lat;
d.end_long = +d.end_long;
d.start_lat = +d.start_lat;
d.start_long = +d.start_long;
d.greatcircle = new arc.GreatCircle({
x: d.start_long,
y: d.start_lat
}, {
x: d.end_long,
y: d.end_lat
});
d.line = d.greatcircle.Arc(100, {
offset: 10
});
d.arc = d.line.json();
}
);
data = data.filter(function(d) {
if (isNaN(d.end_lat) || isNaN(d.end_long)) {
//Do nothing.
} else {
return d;
}
});
svg.selectAll('baseMap')
.data(world.features)
.enter()
.append('path')
.attr('d', path)
// .append("g")
.attr('class', 'baseMap');
svg2.selectAll('baseMap')
.data(world.features)
.enter()
.append('path')
.attr('d', path)
// .append("g")
.attr('class', 'baseMap');
svg3.selectAll('baseMap')
.data(world.features)
.enter()
.append('path')
.attr('d', path)
// .append("g")
.attr('class', 'baseMap');
svg.append("text")
.attr("class","country")
.attr("x", width * 0.70)
.attr("y", height * 0.87)
.text("");
svg2.append("text")
.attr("class","country svg2")
.attr("x", width * 0.70)
.attr("y", height * 0.87)
.text("");
svg3.append("text")
.attr("class","country svg3")
.attr("x", width * 0.70)
.attr("y", height * 0.87)
.text("");
svg.append("text")
.attr("class","country count1")
.attr("x", width * 0.70)
.attr("y", height * 0.93)
.text("");
svg2.append("text")
.attr("class","country count2")
.attr("x", width * 0.70)
.attr("y", height * 0.93)
.text("");
svg3.append("text")
.attr("class","country count3")
.attr("x", width * 0.70)
.attr("y", height * 0.93)
.text("");
svg.selectAll('.cities_end')
.data(data.filter(function(d) { return d.year === "101" }))
.enter().append("path")
.datum(function(d) {
return {
type: "Point",
coordinates: [d.end_long, d.end_lat],
count: +d.count,
country: d.end_country
};
})
.attr("d", path)
.attr('class', 'cities_end')
.on('mouseover',function(d){
d3.select(".country")
.text(d.country)
d3.select(".count1")
.text(d.count + " 名學生")
});
svg2.selectAll('.cities_end')
.data(data.filter(function(d) { return d.year === "102" }))
.enter().append("path")
.datum(function(d) {
return {
type: "Point",
coordinates: [d.end_long, d.end_lat],
count: +d.count,
country: d.end_country
};
})
.attr("d", path)
.attr('class', 'cities_end')
.on('mouseover',function(d){
d3.select(".svg2")
.text(d.country)
d3.select(".count2")
.text(d.count+ " 名學生")
});
svg3.selectAll('.cities_end')
.data(data.filter(function(d) { return d.year === "103" }))
.enter().append("path")
.datum(function(d) {
return {
type: "Point",
coordinates: [d.end_long, d.end_lat],
count: +d.count,
country: d.end_country
};
})
.attr("d", path)
.attr('class', 'cities_end')
.on('mouseover',function(d){
d3.select(".svg3")
.text(d.country)
d3.select(".count3")
.text(d.count+ " 名學生")
});
// console.log(data)
svg.append("g")
.attr("class", "line")
.selectAll(".arc")
.data(data.filter(function(d) { return d.year === "101" })
.map(function(d) {
return d.arc;
}))
.enter()
.append("path")
.attr("class", "arc")
.attr("d", path);
svg.append("text")
.attr("class","years")
.attr("x", width * 0.70)
.attr("y", height * 0.80)
.text('101年');
svg2.append("text")
.attr("class","years")
.attr("x", width * 0.70)
.attr("y", height * 0.80)
.text('102年');
svg3.append("text")
.attr("class","years")
.attr("x", width * 0.70)
.attr("y", height * 0.80)
.text('103年 (上半年)');
svg2.append("g")
.attr("class", "line")
.selectAll(".arc")
.data(data.filter(function(d) { return d.year === "102" }).map(function(d) {
return d.arc;
}))
.enter()
.append("path")
.attr("class", "arc")
.attr("d", path);
// console.log(data);
svg3.append("g")
.attr("class", "line")
.selectAll(".arc")
.data(data.filter(function(d) { return d.year === "103" }).map(function(d) {
return d.arc;
}))
.enter()
.append("path")
.attr("class", "arc")
.attr("d", path);
}
d3.selectAll(".maps").call( //drag on the svg element
d3.behavior.drag()
.origin(function() {
var r = projection.rotate();
return {
x: r[0],
y: -r[1]
}; //starting point
})
.on("drag", function() {
var r = projection.rotate();
/* update retation angle */
projection.rotate([d3.event.x, -d3.event.y, r[2]]);
/* redraw the map and circles after rotation */
svg.selectAll(".baseMap").attr("d", path);
svg.selectAll(".arc").attr("d", path);
svg.selectAll('.cities_end')
.attr("d", path);
svg2.selectAll(".baseMap").attr("d", path);
svg2.selectAll(".arc").attr("d", path);
svg2.selectAll('.cities_end')
.attr("d", path);
svg3.selectAll(".baseMap").attr("d", path);
svg3.selectAll(".arc").attr("d", path);
svg3.selectAll('.cities_end')
.attr("d", path);
})
);
function responsivefy(svg) {
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style('width')),
height = parseInt(svg.style('height')),
aspect = width / height;
svg.attr('viewBox', '0 0 ' + width + ' ' + height)
.attr('perserveAspectRatio', 'xMinYMid')
.call(resize);
d3.select(window).on('resize', resize);
function resize() {
var targetWidth = parseInt(container.style('width'));
svg.attr('width', targetWidth);
svg.attr('height', Math.round(targetWidth / aspect));
}
}
</script>
</body>
</html>
'use strict';
var D2R = Math.PI / 180;
var R2D = 180 / Math.PI;
var Coord = function(lon,lat) {
this.lon = lon;
this.lat = lat;
this.x = D2R * lon;
this.y = D2R * lat;
};
Coord.prototype.view = function() {
return String(this.lon).slice(0, 4) + ',' + String(this.lat).slice(0, 4);
};
Coord.prototype.antipode = function() {
var anti_lat = -1 * this.lat;
var anti_lon = (this.lon < 0) ? 180 + this.lon : (180 - this.lon) * -1;
return new Coord(anti_lon, anti_lat);
};
var LineString = function() {
this.coords = [];
this.length = 0;
};
LineString.prototype.move_to = function(coord) {
this.length++;
this.coords.push(coord);
};
var Arc = function(properties) {
this.properties = properties || {};
this.geometries = [];
};
Arc.prototype.json = function() {
if (this.geometries.length <= 0) {
return {'geometry': { 'type': 'LineString', 'coordinates': null },
'type': 'Feature', 'properties': this.properties
};
} else if (this.geometries.length == 1) {
return {'geometry': { 'type': 'LineString', 'coordinates': this.geometries[0].coords },
'type': 'Feature', 'properties': this.properties
};
} else {
var multiline = [];
for (var i = 0; i < this.geometries.length; i++) {
multiline.push(this.geometries[i].coords);
}
return {'geometry': { 'type': 'MultiLineString', 'coordinates': multiline },
'type': 'Feature', 'properties': this.properties
};
}
};
// TODO - output proper multilinestring
Arc.prototype.wkt = function() {
var wkt_string = '';
var wkt = 'LINESTRING(';
var collect = function(c) { wkt += c[0] + ' ' + c[1] + ','; };
for (var i = 0; i < this.geometries.length; i++) {
if (this.geometries[i].coords.length === 0) {
return 'LINESTRING(empty)';
} else {
var coords = this.geometries[i].coords;
coords.forEach(collect);
wkt_string += wkt.substring(0, wkt.length - 1) + ')';
}
}
return wkt_string;
};
/*
* http://en.wikipedia.org/wiki/Great-circle_distance
*
*/
var GreatCircle = function(start,end,properties) {
if (!start || start.x === undefined || start.y === undefined) {
throw new Error("GreatCircle constructor expects two args: start and end objects with x and y properties");
}
if (!end || end.x === undefined || end.y === undefined) {
throw new Error("GreatCircle constructor expects two args: start and end objects with x and y properties");
}
this.start = new Coord(start.x,start.y);
this.end = new Coord(end.x,end.y);
this.properties = properties || {};
var w = this.start.x - this.end.x;
var h = this.start.y - this.end.y;
var z = Math.pow(Math.sin(h / 2.0), 2) +
Math.cos(this.start.y) *
Math.cos(this.end.y) *
Math.pow(Math.sin(w / 2.0), 2);
this.g = 2.0 * Math.asin(Math.sqrt(z));
if (this.g == Math.PI) {
throw new Error('it appears ' + start.view() + ' and ' + end.view() + " are 'antipodal', e.g diametrically opposite, thus there is no single route but rather infinite");
} else if (isNaN(this.g)) {
throw new Error('could not calculate great circle between ' + start + ' and ' + end);
}
};
/*
* http://williams.best.vwh.net/avform.htm#Intermediate
*/
GreatCircle.prototype.interpolate = function(f) {
var A = Math.sin((1 - f) * this.g) / Math.sin(this.g);
var B = Math.sin(f * this.g) / Math.sin(this.g);
var x = A * Math.cos(this.start.y) * Math.cos(this.start.x) + B * Math.cos(this.end.y) * Math.cos(this.end.x);
var y = A * Math.cos(this.start.y) * Math.sin(this.start.x) + B * Math.cos(this.end.y) * Math.sin(this.end.x);
var z = A * Math.sin(this.start.y) + B * Math.sin(this.end.y);
var lat = R2D * Math.atan2(z, Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
var lon = R2D * Math.atan2(y, x);
return [lon, lat];
};
/*
* Generate points along the great circle
*/
GreatCircle.prototype.Arc = function(npoints,options) {
var first_pass = [];
if (!npoints || npoints <= 2) {
first_pass.push([this.start.lon, this.start.lat]);
first_pass.push([this.end.lon, this.end.lat]);
} else {
var delta = 1.0 / (npoints - 1);
for (var i = 0; i < npoints; ++i) {
var step = delta * i;
var pair = this.interpolate(step);
first_pass.push(pair);
}
}
/* partial port of dateline handling from:
gdal/ogr/ogrgeometryfactory.cpp
TODO - does not handle all wrapping scenarios yet
*/
var bHasBigDiff = false;
var dfMaxSmallDiffLong = 0;
// from http://www.gdal.org/ogr2ogr.html
// -datelineoffset:
// (starting with GDAL 1.10) offset from dateline in degrees (default long. = +/- 10deg, geometries within 170deg to -170deg will be splited)
var dfDateLineOffset = options && options.offset ? options.offset : 10;
var dfLeftBorderX = 180 - dfDateLineOffset;
var dfRightBorderX = -180 + dfDateLineOffset;
var dfDiffSpace = 360 - dfDateLineOffset;
// https://github.com/OSGeo/gdal/blob/7bfb9c452a59aac958bff0c8386b891edf8154ca/gdal/ogr/ogrgeometryfactory.cpp#L2342
for (var j = 1; j < first_pass.length; ++j) {
var dfPrevX = first_pass[j-1][0];
var dfX = first_pass[j][0];
var dfDiffLong = Math.abs(dfX - dfPrevX);
if (dfDiffLong > dfDiffSpace &&
((dfX > dfLeftBorderX && dfPrevX < dfRightBorderX) || (dfPrevX > dfLeftBorderX && dfX < dfRightBorderX))) {
bHasBigDiff = true;
} else if (dfDiffLong > dfMaxSmallDiffLong) {
dfMaxSmallDiffLong = dfDiffLong;
}
}
var poMulti = [];
if (bHasBigDiff && dfMaxSmallDiffLong < dfDateLineOffset) {
var poNewLS = [];
poMulti.push(poNewLS);
for (var k = 0; k < first_pass.length; ++k) {
var dfX0 = parseFloat(first_pass[k][0]);
if (k > 0 && Math.abs(dfX0 - first_pass[k-1][0]) > dfDiffSpace) {
var dfX1 = parseFloat(first_pass[k-1][0]);
var dfY1 = parseFloat(first_pass[k-1][1]);
var dfX2 = parseFloat(first_pass[k][0]);
var dfY2 = parseFloat(first_pass[k][1]);
if (dfX1 > -180 && dfX1 < dfRightBorderX && dfX2 == 180 &&
k+1 < first_pass.length &&
first_pass[k-1][0] > -180 && first_pass[k-1][0] < dfRightBorderX)
{
poNewLS.push([-180, first_pass[k][1]]);
k++;
poNewLS.push([first_pass[k][0], first_pass[k][1]]);
continue;
} else if (dfX1 > dfLeftBorderX && dfX1 < 180 && dfX2 == -180 &&
k+1 < first_pass.length &&
first_pass[k-1][0] > dfLeftBorderX && first_pass[k-1][0] < 180)
{
poNewLS.push([180, first_pass[k][1]]);
k++;
poNewLS.push([first_pass[k][0], first_pass[k][1]]);
continue;
}
if (dfX1 < dfRightBorderX && dfX2 > dfLeftBorderX)
{
// swap dfX1, dfX2
var tmpX = dfX1;
dfX1 = dfX2;
dfX2 = tmpX;
// swap dfY1, dfY2
var tmpY = dfY1;
dfY1 = dfY2;
dfY2 = tmpY;
}
if (dfX1 > dfLeftBorderX && dfX2 < dfRightBorderX) {
dfX2 += 360;
}
if (dfX1 <= 180 && dfX2 >= 180 && dfX1 < dfX2)
{
var dfRatio = (180 - dfX1) / (dfX2 - dfX1);
var dfY = dfRatio * dfY2 + (1 - dfRatio) * dfY1;
poNewLS.push([first_pass[k-1][0] > dfLeftBorderX ? 180 : -180, dfY]);
poNewLS = [];
poNewLS.push([first_pass[k-1][0] > dfLeftBorderX ? -180 : 180, dfY]);
poMulti.push(poNewLS);
}
else
{
poNewLS = [];
poMulti.push(poNewLS);
}
poNewLS.push([dfX0, first_pass[k][1]]);
} else {
poNewLS.push([first_pass[k][0], first_pass[k][1]]);
}
}
} else {
// add normally
var poNewLS0 = [];
poMulti.push(poNewLS0);
for (var l = 0; l < first_pass.length; ++l) {
poNewLS0.push([first_pass[l][0],first_pass[l][1]]);
}
}
var arc = new Arc(this.properties);
for (var m = 0; m < poMulti.length; ++m) {
var line = new LineString();
arc.geometries.push(line);
var points = poMulti[m];
for (var j0 = 0; j0 < points.length; ++j0) {
line.move_to(points[j0]);
}
}
return arc;
};
if (typeof window === 'undefined') {
// nodejs
module.exports.Coord = Coord;
module.exports.Arc = Arc;
module.exports.GreatCircle = GreatCircle;
} else {
// browser
var arc = {};
arc.Coord = Coord;
arc.Arc = Arc;
arc.GreatCircle = GreatCircle;
}
end_lat,end_long,start_lat,start_long,end_country,start_country,count,year
35.8592948,104.1361117,23.5,121,大陸地區,台灣,187,101
34.7857324,134.3756902,23.5,121,日本,台灣,97,101
37.6,-95.665,23.5,121,美國,台灣,164,101
35.8615124,127.096405,23.5,121,大韓民國(南韓),台灣,71,101
51.1719674,10.4541194,23.5,121,德意志聯邦共和國,台灣,99,101
46.2157467,2.2088258,23.5,121,法國,台灣,68,101
55.3632592,-3.4433238,23.5,121,英國,台灣,62,101
52.2129919,5.2793703,23.5,121,荷蘭王國,台灣,54,101
49.8037633,15.4749126,23.5,121,捷克共和國,台灣,37,101
56,-96,23.5,121,加拿大,台灣,36,101
62.1983366,17.5652566,23.5,121,瑞典王國,台灣,42,101
-27.9210555,133.247866,23.5,121,澳大利亞,台灣,33,101
22.3576782,114.1210181,23.5,121,香港,台灣,53,101
40.2085,-3.713,23.5,121,西班牙王國,台灣,24,101
47.696472,13.3457348,23.5,121,奧地利共和國,台灣,43,101
13.03887,101.490104,23.5,121,泰王國(泰國),台灣,19,101
1.3147308,103.8470128,23.5,121,新加坡共和國,台灣,44,101
4.140634,109.6181485,23.5,121,馬來西亞,台灣,22,101
64.9146659,26.0672553,23.5,121,芬蘭共和國,台灣,20,101
11.6978351,122.6217542,23.5,121,菲律賓共和國,台灣,34,101
35.8592948,104.1361117,23.5,121,大陸地區,台灣,276,102
34.7857324,134.3756902,23.5,121,日本,台灣,81,102
37.6,-95.665,23.5,121,美國,台灣,80,102
35.8615124,127.096405,23.5,121,大韓民國(南韓),台灣,68,102
51.1719674,10.4541194,23.5,121,德意志聯邦共和國,台灣,48,102
46.2157467,2.2088258,23.5,121,法國,台灣,49,102
55.3632592,-3.4433238,23.5,121,英國,台灣,45,102
52.2129919,5.2793703,23.5,121,荷蘭王國,台灣,46,102
13.03887,101.490104,23.5,121,泰國,台灣,13,102
40.2085,-3.713,23.5,121,西班牙,台灣,20,102
64.9146659,26.0672553,23.5,121,芬蘭,台灣,28,102
22.3576782,114.1210181,23.5,121,香港,台灣,56,102
49.8037633,15.4749126,23.5,121,捷克共和國,台灣,39,102
50.5010789,4.4764594,23.5,121,比利時,台灣,25,102
56,-96,23.5,121,加拿大,台灣,40,102
4.140634,109.6181485,23.5,121,馬來西亞,台灣,45,102
47.696472,13.3457348,23.5,121,奧地利,台灣,42,102
1.3147308,103.8470128,23.5,121,新加坡共和國,台灣,50,102
62.1983366,17.5652566,23.5,121,瑞典,台灣,47,102
-27.9210555,133.247866,23.5,121,澳大利亞,台灣,36,102
35.8592948,104.1361117,23.5,121,大陸,台灣,170,103
34.7857324,134.3756902,23.5,121,日本,台灣,60,103
37.6,-95.665,23.5,121,美國,台灣,45,103
35.8615124,127.096405,23.5,121,南韓,台灣,44,103
51.1719674,10.4541194,23.5,121,德國,台灣,35,103
46.2157467,2.2088258,23.5,121,法國,台灣,36,103
56,-96,23.5,121,加拿大,台灣,31,103
52.2682651,5.5201215,23.5,121,荷蘭,台灣,24,103
55.3632592,-3.4433238,23.5,121,英國,台灣,13,103
40.2085,-3.713,23.5,121,西班牙,台灣,17,103
22.3576782,114.1210181,23.5,121,香港,台灣,35,103
47.696472,13.3457348,23.5,121,奧地利共和國,台灣,24,103
62.1983366,17.5652566,23.5,121,瑞典,台灣,24,103
-27.9210555,133.247866,23.5,121,澳大利亞,台灣,17,103
1.3147308,103.8470128,23.5,121,新加坡共和國,台灣,27,103
51.9189046,19.1343786,23.5,121,波蘭,台灣,13,103
64.9146659,26.0672553,23.5,121,芬蘭,台灣,12,103
46.8131873,8.2242101,23.5,121,瑞士,台灣,15,103
4.140634,109.6181485,23.5,121,馬來西亞,台灣,22,103