mbostock/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A rotating Cassini projection (transverse equirectangular) on the left; a rotating transverse Mercator projection on the right.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 580,
    velocity = .003,
    time = Date.now();

var position = d3.scale.ordinal()
    .domain([0, 1])
    .rangePoints([0, width * .87], .8);

var projections = [
  d3.geo.equirectangular()
      .scale(85)
      .translate([position(0), height / 2])
      .precision(.3),
  d3.geo.mercator()
      .scale(85)
      .translate([position(1), height / 2])
      .precision(.3)
];

var sphere = {type: "Sphere"},
    graticule = d3.geo.graticule()();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

context.strokeStyle = "#aaa";

var path = d3.geo.path()
    .context(context);

d3.json("/mbostock/raw/4090846/world-110m.json", function(error, world) {
  if (error) throw error;

  var land = topojson.feature(world, world.objects.land);

  d3.timer(function() {
    var dt = Date.now() - time;
    projections[0].rotate([velocity * dt, 0, 90]);
    projections[1].rotate([velocity * dt, 0, 90]);
    render();
  });

  function render() {
    context.clearRect(0, 0, width, height);
    projections.forEach(function(projection) {
      var translate = projection.translate();
      context.save();
      context.translate(translate[0], translate[1]);
      context.rotate(Math.PI / 2);
      context.translate(-translate[0], -translate[1]);

      path.projection(projection);

      context.beginPath();
      path(sphere);
      context.stroke();

      context.beginPath();
      path(graticule);
      context.stroke();

      context.beginPath();
      path(land);
      context.fill();

      context.restore();
    });
  }
});

d3.select(self.frameElement).style("height", height + "px");

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 580,
	velocity = .003,
	time = Date.now();

	var position = d3.scale.ordinal()
	.domain([0, 1])
	.rangePoints([0, width * .87], .8);

	var projections = [
	d3.geo.equirectangular()
	.scale(85)
	.translate([position(0), height / 2])
	.precision(.3),
	d3.geo.mercator()
	.scale(85)
	.translate([position(1), height / 2])
	.precision(.3)
	];

	var sphere = {type: "Sphere"},
	graticule = d3.geo.graticule()();

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var context = canvas.node().getContext("2d");

	context.strokeStyle = "#aaa";

	var path = d3.geo.path()
	.context(context);

	d3.json("/mbostock/raw/4090846/world-110m.json", function(error, world) {
	if (error) throw error;

	var land = topojson.feature(world, world.objects.land);

	d3.timer(function() {
	var dt = Date.now() - time;
	projections[0].rotate([velocity * dt, 0, 90]);
	projections[1].rotate([velocity * dt, 0, 90]);
	render();
	});

	function render() {
	context.clearRect(0, 0, width, height);
	projections.forEach(function(projection) {
	var translate = projection.translate();
	context.save();
	context.translate(translate[0], translate[1]);
	context.rotate(Math.PI / 2);
	context.translate(-translate[0], -translate[1]);

	path.projection(projection);

	context.beginPath();
	path(sphere);
	context.stroke();

	context.beginPath();
	path(graticule);
	context.stroke();

	context.beginPath();
	path(land);
	context.fill();

	context.restore();
	});
	}
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>