Fil/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    The Bertin 1953 projection as a modified Briesemeister.

Forked from alexmacy's block: Projection Transitions v4

  
## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>