Mike Zoppo thejackofalltrades

A Spinning globe with glowing city markers in D3.

Note: This visualization constantly recalculates and reprojects the position of over 4000 markers and thus needs a lot of computation power. Older computer and mobile devices might struggle with the rendering process. Furthermore the visualization is only optimized for Chrome browsers and might look different than expected when opened in other browsers.

Inspired by Curran Kelleher's idea to plot a world map in D3 by using the GeoNames database as seen in his great Introdction to D3 video.

Zoomable/rotatable world globe that uses orthographic projection. Drag behavior is enhanced as described here: https://www.jasondavies.com/maps/rotate/

Performance is not good due to redrawing whole world upon zoom/drag.

Globe rotating all the time, click on canvas to unreel/reel. In this example transition is based on interpolation between two projections and map always cut along antimeridian, it creates effect of unreelling/reelling. You can see some artefacts during reeling back to globe, I guess it is because of clipping or timings overlapping, if you have any ideas how to fix it, let me know.

For other variations of transition from Orthographic to Equirectangular and back check these examples:

This projected is licensed under the terms of the MIT license.

Globe rotating manually via drag event, when mouse click event fires - transition begins. For transition backwards use double click on any country. In this example transition is based on interpolation between two projections and map always cut along antimeridian, it creates effect of unreelling/reelling.

For other variations of transition from Orthographic to Equirectangular and back check these examples:

This projected is licensed under the terms of the MIT license.

	@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700\|Exo+2:300,600);

	/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

	/* Solarized Palette - http://ethanschoonover.com/solarized ---------
	lightgray : #819090;
	gray : #70

	(function(){
	var _fillText,
	__slice = [].slice;

	_fillText = CanvasRenderingContext2D.prototype.fillText;

	CanvasRenderingContext2D.prototype.fillText = function() {
	var args, offset, previousLetter, str, x, y,
	_this = this;

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Tadpoles</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/javascript" canvas="canvas">
	paper.install(window);
	window.onload = function() {
	paper.setup('canvas');