Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active June 21, 2021 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/a7d50df66a7f26989bd86f43850bf0a0 to your computer and use it in GitHub Desktop.
Save Hirosaji/a7d50df66a7f26989bd86f43850bf0a0 to your computer and use it in GitHub Desktop.
d3v5 - Selective Projection Map
# d3v5 - Selective Projection Map
license: mit
(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);
}
});
})();
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<style>
.map-area {
width: 100%;
height: 480px;
}
.map-area svg {
width: 100%;
height: 480px;
stroke: black;
stroke-width: 0.5px;
fill: white;
fill-opacity: 0;
}
.map-area__frame {
stroke-width: 1.0px;
}
</style>
</head>
<body>
<select id="projectionMenu"></select>
<div class="map-area" id="mapID"></div>
<script src="./drawMap.js"></script>
</body>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment