krischer/index.html

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

    // The size of the map.
    var width = 960;
    var height = 500;
    // The rotation speed as a simple factor.
    var rotationFactor = 0.5;
    // Two control variables for the rotation.
    var isMouseDown = false;
    var originalProjection = false;


    var projection = d3.geo.orthographic()
        .scale(250)
        .translate([width / 2, height / 2])
        .clipAngle(90);

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

    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.on('mousedown', function () {
      isMouseDown = d3.mouse(this);
      originalProjection = projection.rotate();
    });

    d3.select('body')
      .on('mouseup', function () {
        isMouseDown = false;
        originalProjection = false;
      })
      .on('mousemove', function () {
        if (isMouseDown) {
          var p = d3.mouse(this);
          var x = originalProjection[0] + rotationFactor * (p[0] - isMouseDown[0]);
          var y = originalProjection[1] - rotationFactor * (p[1] - isMouseDown[1]);
          projection.rotate([x, y]);
          svg.selectAll('path').attr('d', path);
        }
      });

    d3.json('/d/4090846/world-110m.json', function (error, world) {
      svg.append('path')
          .datum(topojson.feature(world, world.objects.land))
          .attr('class', 'land')
          .attr('d', path);
    });

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

	// The size of the map.
	var width = 960;
	var height = 500;
	// The rotation speed as a simple factor.
	var rotationFactor = 0.5;
	// Two control variables for the rotation.
	var isMouseDown = false;
	var originalProjection = false;


	var projection = d3.geo.orthographic()
	.scale(250)
	.translate([width / 2, height / 2])
	.clipAngle(90);

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

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	svg.on('mousedown', function () {
	isMouseDown = d3.mouse(this);
	originalProjection = projection.rotate();
	});

	d3.select('body')
	.on('mouseup', function () {
	isMouseDown = false;
	originalProjection = false;
	})
	.on('mousemove', function () {
	if (isMouseDown) {
	var p = d3.mouse(this);
	var x = originalProjection[0] + rotationFactor * (p[0] - isMouseDown[0]);
	var y = originalProjection[1] - rotationFactor * (p[1] - isMouseDown[1]);
	projection.rotate([x, y]);
	svg.selectAll('path').attr('d', path);
	}
	});

	d3.json('/d/4090846/world-110m.json', function (error, world) {
	svg.append('path')
	.datum(topojson.feature(world, world.objects.land))
	.attr('class', 'land')
	.attr('d', path);
	});

	</script>