|
(function () { |
|
'use strict'; |
|
|
|
var selector = d3.select("#mapID"); |
|
|
|
var width = parseInt(selector.style("width"), 10); |
|
var height = parseInt(selector.style("height"), 10); |
|
|
|
var selectedOption = "Miller"; |
|
|
|
var options = { |
|
"Aitoff": d3.geoAitoff(), |
|
"Albers": d3.geoAlbers().scale(145).parallels([20, 50]), |
|
"August": d3.geoAugust().scale(60), |
|
"Baker": d3.geoBaker().scale(100), |
|
"Boggs": d3.geoBoggs(), |
|
"Bonne": d3.geoBonne().scale(120), |
|
"Bromley": d3.geoBromley(), |
|
"Collignon": d3.geoCollignon().scale(93), |
|
"Craster Parabolic": d3.geoCraster(), |
|
"Eckert I": d3.geoEckert1().scale(165), |
|
"Eckert II": d3.geoEckert2().scale(165), |
|
"Eckert III": d3.geoEckert3().scale(180), |
|
"Eckert IV": d3.geoEckert4().scale(180), |
|
"Eckert V": d3.geoEckert5().scale(170), |
|
"Eckert VI": d3.geoEckert6().scale(170), |
|
"Eisenlohr": d3.geoEisenlohr().scale(60), |
|
"Equirectangular (Plate Carrée)": d3.geoEquirectangular(), |
|
"Hammer": d3.geoHammer().scale(165), |
|
"Hill": d3.geoHill(), |
|
"Goode Homolosine": d3.geoHomolosine(), |
|
"Kavrayskiy VII": d3.geoKavrayskiy7(), |
|
"Lambert cylindrical equal-area": d3.geoCylindricalEqualArea(), |
|
"Lagrange": d3.geoLagrange().scale(120), |
|
"Larrivée": d3.geoLarrivee().scale(95), |
|
"Laskowski": d3.geoLaskowski().scale(120), |
|
"Loximuthal": d3.geoLoximuthal(), |
|
"Mercator": d3.geoMercator().scale(width / 4 / Math.PI), |
|
"Miller": d3.geoMiller().scale(100), |
|
"McBryde–Thomas Flat-Polar Parabolic": d3.geoMtFlatPolarParabolic(), |
|
"McBryde–Thomas Flat-Polar Quartic": d3.geoMtFlatPolarQuartic(), |
|
"McBryde–Thomas Flat-Polar Sinusoidal": d3.geoMtFlatPolarSinusoidal(), |
|
"Mollweide": d3.geoMollweide().scale(125), |
|
"Natural Earth": d3.geoNaturalEarth().scale(125), |
|
"Nell–Hammer": d3.geoNellHammer(), |
|
"Polyconic": d3.geoPolyconic().scale(100), |
|
"Robinson": d3.geoRobinson(), |
|
"Sinusoidal": d3.geoSinusoidal(), |
|
"Sinu-Mollweide": d3.geoSinuMollweide(), |
|
"van der Grinten": d3.geoVanDerGrinten().scale(75), |
|
"van der Grinten IV": d3.geoVanDerGrinten4().scale(120), |
|
"Wagner IV": d3.geoWagner4(), |
|
"Wagner VI": d3.geoWagner6(), |
|
"Wagner VII": d3.geoWagner7(), |
|
"Winkel Tripel": d3.geoWinkel3() |
|
}; |
|
|
|
var loadFiles = [ |
|
d3.json("./world.geojson"), |
|
]; |
|
|
|
Promise.all(loadFiles).then(function (dataList) { |
|
|
|
var geojson = dataList[0]; |
|
|
|
geojson.features.forEach(d => { |
|
d.geometry.coordinates[0] = d.geometry.coordinates[0].map(c => { |
|
return [c[0]-90, c[1]] |
|
}) |
|
}) |
|
|
|
var menu = d3.select("#projectionMenu") |
|
.on("change", change); |
|
menu.selectAll("option") |
|
.data(Object.keys(options)) |
|
.enter().append("option") |
|
.text(function (key) { return key; }); |
|
update(selectedOption); |
|
|
|
function change() { |
|
selector.html(""); |
|
|
|
selectedOption = Object.keys(options)[this.selectedIndex]; |
|
update(selectedOption); |
|
} |
|
|
|
function update(key){ |
|
|
|
var svg = selector.append("svg"); |
|
var projectionMethod = options[key]; |
|
|
|
menu.selectAll("option") |
|
.attr("selected", function (k) { if (key === k) return "selected"; }); |
|
|
|
var projection = projectionMethod |
|
.translate([width / 2, height / 2]) |
|
.rotate([-10, 0, 0]); |
|
|
|
var path = d3.geoPath() |
|
.projection(projection); |
|
|
|
svg.append("g") |
|
.attr("class", "map-area__country") |
|
.selectAll("path") |
|
.data(geojson.features) |
|
.enter() |
|
.append("path") |
|
.attr("d", path); |
|
|
|
var path = d3.geoPath(projection); |
|
var graticule = d3.geoGraticule(); |
|
|
|
svg.append("defs").append("path") |
|
.datum({ type: "Sphere" }) |
|
.attr("id", "sphere") |
|
.attr("d", path); |
|
svg.append("use") |
|
.attr("class", "map-area__frame") |
|
.attr("xlink:href", "#sphere"); |
|
svg.append("g") |
|
.attr("class", "map-area__grid") |
|
.append("path") |
|
.datum(graticule) |
|
.attr("d", path); |
|
|
|
} |
|
|
|
}); |
|
|
|
})(); |