jeremybuis/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A new spinny map for the masses


## index.html
<!doctype html>
<html class="no-js" lang="en">
<meta charset="utf-8">

<style>
svg {
  width:  800px;
  height: 800px;
  pointer-events: all;
}

circle {
  fill: #dbe4f0;
}

path {
  fill: #aaa;
  stroke: #fff;
}

#header {
  top: 7px;
  left: 685px;
  text-align: right;
  width: auto;
}

#header div {
  font-size: 12px;
}

.tip { color: #999; }
</style>

<body>
  <div id="container">
  </div>

  <div id="body">
      <div id="header">
        d3.geo.azimuthal
        <div><label for="proj">Projection: </label><select id="proj">
          <option value="azimuthalEqualArea">azimuthalEqualArea</option>
          <option value="azimuthalEquidistant">azimuthalEquidistant </option>
          <option value="gnomonic">gnomonic</option>
          <option value="orthographic" selected>orthographic</option>
          <option value="stereographic">stereographic</option>
        </select></div>
        <div class="tip">drag to rotate the origin</div>
        <div><label for="animate">animate:</label>
          <input id="animate" type="checkbox" checked>
        </div>
      </div>
    </div>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script>

  console.log('drawing like a bauss');

  var width = 800;
  var height = 800;

  var feature, // eventually: all svg paths (countries) of the world
      toggle; // animation on/off control

  var scale = {
    orthographic: 380,
    stereographic: 380,
    gnomonic: 380,
    azimuthalEquidistant: 380 / Math.PI * 2,
    azimuthalEqualArea: 380 / Math.SQRT2
  };

  var clipAngle = {
    orthographic: 90,
    stereographic: 90,
    gnomonic: 80,
    azimuthalEquidistant: 90,
    azimuthalEqualArea: 90
  };

  // var clipAngle = {
  //   orthographic: 90,
  //   stereographic: 170,
  //   gnomonic: 80,
  //   azimuthalEquidistant: 180 - 1e-3,
  //   azimuthalEqualArea: 180 - 1e-3
  // };

  var projections = {
    orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
    stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
    gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
    azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
    azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
  };

  var projection = projections.orthographic;

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

  var svg = d3.select("#body").append("svg:svg")
      .attr("width",  width)
      .attr("height", height)
      .on("mousedown", mousedown);

  if (frameElement) {
    frameElement.style.height = '800px';
  }

  d3.json("/jeremybuis/raw/5406962/world-50m.json", function(error, world) {
    var collection = topojson.feature(world, world.objects.subunits).features;

    feature = svg.selectAll("path")
        .data(collection)
      .enter().append("svg:path")
        .attr("d", clip);

    feature.append("svg:title")
        .text(function(d) { return d.properties.name; });

    startAnimation();
    d3.select('#animate').on('click', function () {
      if (done) {
        startAnimation();
      } else {
        stopAnimation();
      }
    });
  });

    function stopAnimation() {
      done = true;
      d3.select('#animate').node().checked = false;
    }

    function startAnimation() {
      done = false;
      d3.timer(function() {
        var origin = projection.center();
        var rotation = projection.rotate();
        rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
        projection.rotate(rotation);
        refresh();
        return done;
      });
    }

    function animationState() {
      return 'animation: '+ (done ? 'off' : 'on');
    }

    d3.select(window)
        .on("mousemove", mousemove)
        .on("mouseup", mouseup);

    d3.select("select").on("change", function() {
      stopAnimation();

      projection = projections[this.value];
      path.projection(projection);
      // projection.mode(this.value).scale(scale[this.value]);
      refresh(750);
    });

    var m0, o0, done;

    function mousedown() {
      stopAnimation();

      m0 = [d3.event.pageX, d3.event.pageY];
      o0 = projection.rotate();

      d3.event.preventDefault();
    }

    function mousemove() {
      if (m0) {
        var m1 = [d3.event.pageX, d3.event.pageY],
            // o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
            o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
        projection.rotate(o1);
        refresh();
      }
    }

    function mouseup() {
      if (m0) {
        mousemove();
        m0 = null;
      }
    }

    function refresh(duration) {
      (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
    }

    function clip(d) {
      return path(d);
    }

    function reframe(css) {
      for (var name in css) {
        frameElement.style[name] = css[name] + 'px';
      }
    }
  </script>

</body>
</html>

## world-50m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-50m.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>
	<html class="no-js" lang="en">
	<meta charset="utf-8">

	<style>
	svg {
	width: 800px;
	height: 800px;
	pointer-events: all;
	}

	circle {
	fill: #dbe4f0;
	}

	path {
	fill: #aaa;
	stroke: #fff;
	}

	#header {
	top: 7px;
	left: 685px;
	text-align: right;
	width: auto;
	}

	#header div {
	font-size: 12px;
	}

	.tip { color: #999; }
	</style>

	<body>
	<div id="container">
	</div>

	<div id="body">
	<div id="header">
	d3.geo.azimuthal
	<div><label for="proj">Projection: </label><select id="proj">
	<option value="azimuthalEqualArea">azimuthalEqualArea</option>
	<option value="azimuthalEquidistant">azimuthalEquidistant </option>
	<option value="gnomonic">gnomonic</option>
	<option value="orthographic" selected>orthographic</option>
	<option value="stereographic">stereographic</option>
	</select></div>
	<div class="tip">drag to rotate the origin</div>
	<div><label for="animate">animate:</label>
	<input id="animate" type="checkbox" checked>
	</div>
	</div>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	console.log('drawing like a bauss');

	var width = 800;
	var height = 800;

	var feature, // eventually: all svg paths (countries) of the world
	toggle; // animation on/off control

	var scale = {
	orthographic: 380,
	stereographic: 380,
	gnomonic: 380,
	azimuthalEquidistant: 380 / Math.PI * 2,
	azimuthalEqualArea: 380 / Math.SQRT2
	};

	var clipAngle = {
	orthographic: 90,
	stereographic: 90,
	gnomonic: 80,
	azimuthalEquidistant: 90,
	azimuthalEqualArea: 90
	};

	// var clipAngle = {
	// orthographic: 90,
	// stereographic: 170,
	// gnomonic: 80,
	// azimuthalEquidistant: 180 - 1e-3,
	// azimuthalEqualArea: 180 - 1e-3
	// };

	var projections = {
	orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
	stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
	gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
	azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
	azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
	};

	var projection = projections.orthographic;

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

	var svg = d3.select("#body").append("svg:svg")
	.attr("width", width)
	.attr("height", height)
	.on("mousedown", mousedown);

	if (frameElement) {
	frameElement.style.height = '800px';
	}

	d3.json("/jeremybuis/raw/5406962/world-50m.json", function(error, world) {
	var collection = topojson.feature(world, world.objects.subunits).features;

	feature = svg.selectAll("path")
	.data(collection)
	.enter().append("svg:path")
	.attr("d", clip);

	feature.append("svg:title")
	.text(function(d) { return d.properties.name; });

	startAnimation();
	d3.select('#animate').on('click', function () {
	if (done) {
	startAnimation();
	} else {
	stopAnimation();
	}
	});
	});

	function stopAnimation() {
	done = true;
	d3.select('#animate').node().checked = false;
	}

	function startAnimation() {
	done = false;
	d3.timer(function() {
	var origin = projection.center();
	var rotation = projection.rotate();
	rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
	projection.rotate(rotation);
	refresh();
	return done;
	});
	}

	function animationState() {
	return 'animation: '+ (done ? 'off' : 'on');
	}

	d3.select(window)
	.on("mousemove", mousemove)
	.on("mouseup", mouseup);

	d3.select("select").on("change", function() {
	stopAnimation();

	projection = projections[this.value];
	path.projection(projection);
	// projection.mode(this.value).scale(scale[this.value]);
	refresh(750);
	});

	var m0, o0, done;

	function mousedown() {
	stopAnimation();

	m0 = [d3.event.pageX, d3.event.pageY];
	o0 = projection.rotate();

	d3.event.preventDefault();
	}

	function mousemove() {
	if (m0) {
	var m1 = [d3.event.pageX, d3.event.pageY],
	// o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
	o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
	projection.rotate(o1);
	refresh();
	}
	}

	function mouseup() {
	if (m0) {
	mousemove();
	m0 = null;
	}
	}

	function refresh(duration) {
	(duration ? feature.transition().duration(duration) : feature).attr("d", clip);
	}

	function clip(d) {
	return path(d);
	}

	function reframe(css) {
	for (var name in css) {
	frameElement.style[name] = css[name] + 'px';
	}
	}
	</script>

	</body>
	</html>