Taiwanese Exchange Student Visualization

README.md

A news app on Taiwanese exchange student database

Built with blockbuilder.org

arc.js

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

exchange_student.csv

index.html

<!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='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="http://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>

script.js

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: "網址" }
        ]
    } );
} );

thumbnail.png

world_countries.json