|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<title>PROJECTION FACE</title> |
|
<style> |
|
body{ text-align: center } |
|
|
|
canvas { |
|
cursor: move; |
|
} |
|
|
|
.world { |
|
float:left; |
|
margin-right: 20px; |
|
position:relative; |
|
} |
|
|
|
.center { |
|
text-align: center; |
|
} |
|
|
|
#maps { |
|
width: 1200px; |
|
margin: auto; |
|
} |
|
|
|
.world h2 { |
|
font-size: 16px; |
|
width: 250px; |
|
margin: auto; |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
|
|
</style> |
|
|
|
<div id="maps"></div> |
|
|
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> |
|
<script src="http://d3js.org/d3.geo.polyhedron.v0.min.js"></script> |
|
<script> |
|
|
|
var ratio = window.devicePixelRatio || 1, |
|
width = 250 * ratio, |
|
height = 250 * ratio; |
|
scaler = 0.5; |
|
|
|
var options = [ |
|
{name: "Aitoff", projection: d3.geo.aitoff()}, |
|
{name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50])}, |
|
{name: "August", projection: d3.geo.august().scale(60)}, |
|
{name: "Baker", projection: d3.geo.baker().scale(100)}, |
|
{name: "Berghaus", projection: d3.geo.berghaus().scale(100)}, |
|
{name: "Boggs", projection: d3.geo.boggs()}, |
|
{name: "Bonne", projection: d3.geo.bonne().scale(100)}, |
|
{name: "Bromley", projection: d3.geo.bromley()}, |
|
{name: "Collignon", projection: d3.geo.collignon().scale(93)}, |
|
{name: "Craster Parabolic", projection: d3.geo.craster()}, |
|
{name: "Eckert I", projection: d3.geo.eckert1().scale(165)}, |
|
{name: "Eckert II", projection: d3.geo.eckert2().scale(165)}, |
|
{name: "Eckert III", projection: d3.geo.eckert3().scale(180)}, |
|
{name: "Eckert IV", projection: d3.geo.eckert4().scale(180)}, |
|
{name: "Eckert V", projection: d3.geo.eckert5().scale(170)}, |
|
{name: "Eckert VI", projection: d3.geo.eckert6().scale(170)}, |
|
{name: "Eisenlohr", projection: d3.geo.eisenlohr().scale(60)}, |
|
{name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular()}, |
|
{name: "Fahey", projection: d3.geo.fahey().scale(120)}, |
|
{name: "Gall Stereographic", projection: d3.geo.cylindricalStereographic().parallel(45).scale(140)}, |
|
{name: "Goode Homolosine", projection: d3.geo.homolosine()}, |
|
{name: "Ginzburg IV", projection: d3.geo.ginzburg4().scale(120)}, |
|
{name: "Ginzburg V", projection: d3.geo.ginzburg5().scale(120)}, |
|
{name: "Ginzburg VI", projection: d3.geo.ginzburg6().scale(120)}, |
|
{name: "Ginzburg VIII", projection: d3.geo.ginzburg8().scale(120)}, |
|
{name: "Ginzburg IX", projection: d3.geo.ginzburg9().scale(120)}, |
|
{name: "Gringorten", projection: d3.geo.gringorten().scale(220)}, |
|
{name: "Guyou", projection: d3.geo.guyou().scale(150)}, |
|
{name: "Hammer", projection: d3.geo.hammer().scale(165)}, |
|
{name: "Hammer Retroazimuthal", projection: d3.geo.hammerRetroazimuthal().scale(90)}, |
|
{name: "HEALPix", projection: d3.geo.healpix()}, |
|
{name: "Hill", projection: d3.geo.hill().scale(120)}, |
|
{name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()}, |
|
{name: "Lagrange", projection: d3.geo.lagrange().scale(120)}, |
|
{name: "Lambert cylindrical equal-area", projection: d3.geo.cylindricalEqualArea()}, |
|
{name: "Larrivée", projection: d3.geo.larrivee().scale(95)}, |
|
{name: "Laskowski", projection: d3.geo.laskowski().scale(120)}, |
|
{name: "Loximuthal", projection: d3.geo.loximuthal()}, |
|
{name: "Mercator", projection: d3.geo.mercator().scale(100)}, |
|
{name: "Miller", projection: d3.geo.miller().scale(100)}, |
|
{name: "McBryde–Thomas Flat-Polar Parabolic", projection: d3.geo.mtFlatPolarParabolic()}, |
|
{name: "McBryde–Thomas Flat-Polar Quartic", projection: d3.geo.mtFlatPolarQuartic()}, |
|
{name: "McBryde–Thomas Flat-Polar Sinusoidal", projection: d3.geo.mtFlatPolarSinusoidal()}, |
|
{name: "Mollweide", projection: d3.geo.mollweide().scale(165)}, |
|
{name: "Natural Earth", projection: d3.geo.naturalEarth()}, |
|
{name: "Nell–Hammer", projection: d3.geo.nellHammer()}, |
|
{name: "Orthographic", projection: d3.geo.orthographic().scale(200)}, |
|
{name: "Polyconic", projection: d3.geo.polyconic().scale(100)}, |
|
{name: "Rectangular Polyconic", projection: d3.geo.rectangularPolyconic().scale(120)}, |
|
{name: "Robinson", projection: d3.geo.robinson()}, |
|
{name: "Sinusoidal", projection: d3.geo.sinusoidal()}, |
|
{name: "Sinu-Mollweide", projection: d3.geo.sinuMollweide()}, |
|
{name: "Stereographic", projection: d3.geo.stereographic()}, |
|
{name: "Times", projection: d3.geo.times().scale(140)}, |
|
{name: "Van der Grinten", projection: d3.geo.vanDerGrinten().scale(75)}, |
|
{name: "Van der Grinten II", projection: d3.geo.vanDerGrinten2().scale(75)}, |
|
{name: "Van der Grinten III", projection: d3.geo.vanDerGrinten3().scale(75)}, |
|
{name: "Van der Grinten IV", projection: d3.geo.vanDerGrinten4().scale(120)}, |
|
{name: "Wagner IV", projection: d3.geo.wagner4()}, |
|
{name: "Wagner VI", projection: d3.geo.wagner6()}, |
|
{name: "Wagner VII", projection: d3.geo.wagner7()}, |
|
{name: "Waterman", projection: d3.geo.polyhedron.waterman().scale(70)}, |
|
{name: "Winkel Tripel", projection: d3.geo.winkel3()} |
|
]; |
|
|
|
|
|
var i = 0, |
|
n = options.length - 1; |
|
|
|
var projection = options[i].projection; |
|
|
|
options.forEach(function(option) { |
|
option.projection |
|
.translate([width / 2, height / 2]) |
|
.scale(option.projection.scale() * ratio * scaler) |
|
.clipExtent([[2 * ratio, 2 * ratio], [width - 2 * ratio, height - 2 * ratio]]); |
|
}); |
|
|
|
var graticule = d3.geo.graticule()(), |
|
origin = {x: 0, y: 0}, |
|
face, |
|
boundaries; |
|
|
|
function draw(error, face) { |
|
var div = d3.select("#maps").selectAll(".world") |
|
.data(options) |
|
var divE = div.enter().append("div") |
|
.attr("class", "world") |
|
divE.append("h2").text(function(d) { return d.name; }); |
|
divE.append("canvas") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.style("width", width / ratio + "px") |
|
.style("height", height / ratio + "px") |
|
.call(d3.behavior.drag() |
|
.origin(function() { return origin; }) |
|
.on("drag", function() { |
|
origin.x = d3.event.x; |
|
origin.y = d3.event.y; |
|
update(); |
|
})) |
|
.datum(function(d) { |
|
var projection = d.projection; |
|
var canvas = this; |
|
var context = canvas.getContext("2d"); |
|
var path = d3.geo.path() |
|
.context(context) |
|
.projection(projection); |
|
return function() { |
|
context.clearRect(0, 0, width, height); |
|
context.fillStyle = "#eef"; |
|
context.beginPath(), path({type: "Sphere"}), context.fill(); |
|
context.fillStyle = "#3c3"; |
|
context.lineWidth = .5 * ratio; |
|
context.beginPath(), path(d[1]), context.fill(), context.stroke(); |
|
|
|
context.strokeStyle = "#999"; |
|
context.beginPath(), path(graticule), context.stroke(); |
|
|
|
if (face) { |
|
context.strokeStyle = "#000"; |
|
context.lineWidth = 2; |
|
context.beginPath(), path(face), context.stroke(); |
|
} |
|
}; |
|
}) |
|
|
|
update(); |
|
|
|
function update() { |
|
options.forEach(function(option) { |
|
var projection = option.projection; |
|
projection.rotate([origin.x, -origin.y]); |
|
}); |
|
div.selectAll("canvas").each(function(d) { |
|
d(); |
|
}); |
|
} |
|
} |
|
|
|
|
|
function redraw(path) { |
|
context.clearRect(0, 0, width, height); |
|
context.lineWidth = .5 * ratio; |
|
|
|
context.strokeStyle = "#999"; |
|
context.beginPath(), path(graticule), context.stroke(); |
|
|
|
context.beginPath(), path({type: "Sphere"}), context.stroke(); |
|
|
|
context.lineWidth = 2 * ratio; |
|
|
|
if (face) { |
|
context.strokeStyle = "#000"; |
|
context.lineWidth = 2; |
|
context.beginPath(), path(face), context.stroke(); |
|
} |
|
} |
|
|
|
d3.json("face.geojson", function(error, data) { |
|
face = data; |
|
draw(error, face) |
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |