Skip to content

Instantly share code, notes, and snippets.

@Fil

Fil/.block

Last active October 2, 2017 06:59
Download ZIP
Briesemeister to Bertin1953
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #fcfcfa;
height: 500px;
position: relative;
width: 960px;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
#options {position: absolute; top: 0; left:0}
#options label { display: block }
</style>
<body>
<div id=options>
<label><input type=checkbox id=hammer /> Aspect Ratio: 1.68 (1.75 for Briesemeister)</label>
<label><input type=checkbox id=rotate /> Rotation</label>
<label><input type=checkbox id=western /> West warp</label>
<label><input type=checkbox id=south /> South warp</label>
<label><input type=checkbox id=north /> North warp</label>
</div>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-geo-projection"></script>
<script src="https://unpkg.com/topojson"></script>
<script>
d3.selectAll('#options input')
.on('change', function() {
parm[d3.select(this).attr('id')] = this.checked;
draw();
})
var width = 960,
height = 500;
// import from math
var sin = Math.sin, cos = Math.cos, pi = Math.PI;
var parm = {
hammer: false,
western: false,
south: false,
shoulders: false,
rotate: false
};
var visionscarto_bertin_1953_alpha3 = function (lambda, phi) {
// import from d3-geo-projection
var hammer = d3.geoHammerRaw(parm.hammer ? 1.68 : 1.75, 2);
var vector, e, p, fu = -1.4;
// Western hemisphere fix pre-projection
if (parm.western)
if (lambda + phi < fu) {
vector = [ 1, - 0.8 * sin(phi + pi/2)];
e = (lambda - phi + 1.6) * (lambda + phi - fu) / 8;
lambda += e * vector[0];
phi += e * vector[1];
}
p = hammer(lambda, phi);
// Fix post-projection
e = (1 - cos(lambda * phi)) / 12;
// South
if (parm.south)
if (p[1] < 0) {
p[0] *= 1 + e;
}
// North
if (parm.north)
if (p[1] > 0) {
p[1] *= 1 + e / 1.5 * p[0] * p[0];
}
return p;
};
var projection = d3.geoProjection(visionscarto_bertin_1953_alpha3);
var path = d3.geoPath(projection);
var graticule = d3.geoGraticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("world-110m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
});
draw();
function draw() {
if (parm.rotate)
projection.rotate([-16.5, -42]).center([7,0])
else
projection.rotate([-10, -45]).center([0,0])
svg.selectAll("path")
.attr("d", path)
}
</script>
Raw
world-110m.json
Loading
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