D3.js + Orthographic Projection

README.md

D3 Visualization: Places Traveled

This gist was originally created to illustrate the data scrubbing process, and all files are associated with my blog post under the same name.

The file progression proceeds from data.txt, a simple text document which contains a list of places, to formatting this original data set as GeoJSON, data.geojson.

Once formatted as GeoJSON, we use D3.js to visualize the data, drawing inspiration from similar visualizations utilizing the same framework.

data.csv

data.geojson

data.json

[
  {
		"original address": "London, UK",
		"returned address": "London, UK",
		"latitude": "51.5112139",
		"longitude": "-0.1198244"
	},
	{
		"original address": "Brooklyn, New York",
		"returned address": "Brooklyn, NY, USA",
		"latitude": "40.65",
		"longitude": "-73.95"
	},
	{
		"original address": "321 West 37th Street, Manhattan, New York, USA",
		"returned address": "321 West 37th Street, New York, NY 10018, USA",
		"latitude": "40.7545443",
		"longitude": "-73.9930957"
	},
	{
		"original address": "San Francisco, USA",
		"returned address": "San Francisco, CA, USA",
		"latitude": "37.7749295",
		"longitude": "-122.4194155"
	},
	{
		"original address": "Zurich, Switzerland",
		"returned address": "Zurich, Switzerland",
		"latitude": "47.3686498",
		"longitude": "8.5391825"
	},
	{
		"original address": "Prague",
		"returned address": "Prague, Czech Republic",
		"latitude": "50.0755381",
		"longitude": "14.4378005"
	},
	{
		"original address": "Nairobi, Kenya",
		"returned address": "Nairobi, Kenya",
		"latitude": "-1.2920659",
		"longitude": "36.8219462"
	},
	{
		"original address": "Beijing",
		"returned address": "Beijing, China",
		"latitude": "39.90403",
		"longitude": "116.407526"
	},
	{
		"original address": "Yellowstone National Park",
		"returned address": "Yellowstone National Park, WY 82190, USA",
		"latitude": "44.4225727",
		"longitude": "-110.5866674"
	},
	{
		"original address": "OX1 3PU",
		"returned address": "Oxford, Oxfordshire OX1 3PU, UK",
		"latitude": "51.7599982",
		"longitude": "-1.256313"
	},
	{
		"original address": "Saint Peter's University, Jersey City, NJ",
		"returned address": "Saint Peter's University, 2641 John F Kennedy Boulevard West, Jersey City, NJ 07306, USA",
		"latitude": "40.7266843",
		"longitude": "-74.0712895"
	},
	{
		"original address": "Valencia, Spain",
		"returned address": "Valencia, Spain",
		"latitude": "39.4699075",
		"longitude": "-0.3762881"
	},
	{
		"original address": "Barcelona, Spain",
		"returned address": "Barcelona, Spain",
		"latitude": "41.3850639",
		"longitude": "2.1734035"
	},
	{
		"original address": "Milan, Italy",
		"returned address": "Milan, Italy",
		"latitude": "45.4654542",
		"longitude": "9.186516"
	},
	{
		"original address": "Beersheva, Israel",
		"returned address": "Beersheba, Israel",
		"latitude": "31.252973",
		"longitude": "34.791462"
	},
	{
		"original address": "Tel Aviv, Israel",
		"returned address": "Tel Aviv, Israel",
		"latitude": "32.066158",
		"longitude": "34.777819"
	},
	{
		"original address": "Jerusalem, Israel",
		"returned address": "Jerusalem, Israel",
		"latitude": "31.768319",
		"longitude": "35.21371"
	},
	{
		"original address": "Eliat, Israel",
		"returned address": "Eilat, Israel",
		"latitude": "29.557669",
		"longitude": "34.951925"
	},
	{
		"original address": "Xi'an, China",
		"returned address": "Xi'an, Shaanxi, China",
		"latitude": "34.341568",
		"longitude": "108.940175"
	},
	{
		"original address": "Warsaw, Poland",
		"returned address": "Warsaw, Poland",
		"latitude": "52.2296756",
		"longitude": "21.0122287"
	},
	{
		"original address": "Krakow, Poland",
		"returned address": "Kraków, Poland",
		"latitude": "50.0646501",
		"longitude": "19.9449799"
	},
	{
		"original address": "Negril, Jamaica",
		"returned address": "Negril, Jamaica",
		"latitude": "18.273979",
		"longitude": "-78.353142"
	},
	{
		"original address": "Cancun, Mexico",
		"returned address": "Cancún, Quintana Roo, Mexico",
		"latitude": "21.158964",
		"longitude": "-86.845937"
	},
	{
		"original address": "Ann Arbor, MI",
		"returned address": "Ann Arbor, MI, USA",
		"latitude": "42.2808256",
		"longitude": "-83.7430378"
	},
	{
		"original address": "Madison, WI",
		"returned address": "Madison, WI, USA",
		"latitude": "43.0730517",
		"longitude": "-89.4012302"
	},
	{
		"original address": "Minneapolis, MN",
		"returned address": "Minneapolis, MN, USA",
		"latitude": "44.983334",
		"longitude": "-93.26667"
	},
	{
		"original address": "Lawrence, Kansas",
		"returned address": "Lawrence, KS, USA",
		"latitude": "38.9716689",
		"longitude": "-95.2352501"
	},
	{
		"original address": "Kirksville, MO",
		"returned address": "Kirksville, MO 63501, USA",
		"latitude": "40.1947539",
		"longitude": "-92.5832496"
	},
	{
		"original address": "St Louis, MO",
		"returned address": "St. Louis, MO, USA",
		"latitude": "38.6270025",
		"longitude": "-90.1994042"
	},
	{
		"original address": "Kansas City, MO",
		"returned address": "Kansas City, MO, USA",
		"latitude": "39.0997265",
		"longitude": "-94.5785667"
	},
	{
		"original address": "Jackson Hole, WY",
		"returned address": "Jackson, WY, USA",
		"latitude": "43.4799291",
		"longitude": "-110.7624282"
	},
	{
		"original address": "Los Angeles, CA",
		"returned address": "Los Angeles, CA, USA",
		"latitude": "34.0522342",
		"longitude": "-118.2436849"
	},
	{
		"original address": "San Diego, CA",
		"returned address": "San Diego, CA, USA",
		"latitude": "32.7153292",
		"longitude": "-117.1572551"
	},
	{
		"original address": "Los Altos, CA",
		"returned address": "Los Altos, CA, USA",
		"latitude": "37.3852183",
		"longitude": "-122.1141298"
	},
	{
		"original address": "Columbus, OH",
		"returned address": "Columbus, OH, USA",
		"latitude": "39.9611755",
		"longitude": "-82.9987942"
	},
	{
		"original address": "Coco Beach, FL",
		"returned address": "Cocoa Beach, FL, USA",
		"latitude": "28.3200067",
		"longitude": "-80.6075513"
	},
	{
		"original address": "Orlando, FL",
		"returned address": "Orlando, FL, USA",
		"latitude": "28.5383355",
		"longitude": "-81.3792365"
	},
	{
		"original address": "Atlanta, GA",
		"returned address": "Atlanta, GA, USA",
		"latitude": "33.7489954",
		"longitude": "-84.3879824"
	},
	{
		"original address": "Arkadelphia, AR",
		"returned address": "Arkadelphia, AR, USA",
		"latitude": "34.1209292",
		"longitude": "-93.0537839"
	},
	{
		"original address": "Philadelphia, PA",
		"returned address": "Philadelphia, PA, USA",
		"latitude": "39.952335",
		"longitude": "-75.163789"
	},
	{
		"original address": "Jersey City, NJ",
		"returned address": "Jersey City, NJ, USA",
		"latitude": "40.7281575",
		"longitude": "-74.0776417"
	},
	{
		"original address": "Manchester, UK",
		"returned address": "Manchester, UK",
		"latitude": "53.479251",
		"longitude": "-2.247926"
	},
	{
		"original address": "Paris, France",
		"returned address": "Paris, France",
		"latitude": "48.856614",
		"longitude": "2.3522219"
	},
	{
		"original address": "Honolulu, HI",
		"returned address": "Honolulu, HI, USA",
		"latitude": "21.3069444",
		"longitude": "-157.8583333"
	},
	{
		"original address": "Rovinj, Croatia",
		"returned address": "Rovinj, Croatia",
		"latitude": "45.0811661",
		"longitude": "13.6387067"
	},
	{
		"original address": "St Gallen, Switzerland",
		"returned address": "St. Gallen, Switzerland",
		"latitude": "47.4166667",
		"longitude": "9.3666667"
	},
	{
		"original address": "Amsterdam, The Netherlands",
		"returned address": "Amsterdam, The Netherlands",
		"latitude": "52.3702157",
		"longitude": "4.8951679"
	},
	{
		"original address": "Istanbul, Turkey",
		"returned address": "Istanbul, Turkey",
		"latitude": "41.00527",
		"longitude": "28.97696"
	},
	{
		"original address": "Olympus, Turkey",
		"returned address": "Uludağ, 16370 Bursa Province, Turkey",
		"latitude": "40.0736111",
		"longitude": "29.2177777"
	},
	{
		"original address": "Troy, Turkey",
		"returned address": "Troia, Tevfikiye Köyü, 17060 İntepe/Çanakkale Province, Turkey",
		"latitude": "39.9575",
		"longitude": "26.2388889"
	},
	{
		"original address": "Dallas, Texas",
		"returned address": "Dallas, TX, USA",
		"latitude": "32.7801399",
		"longitude": "-96.8004511"
	},
	{
		"original address": "Arlington, Texas",
		"returned address": "Arlington, TX, USA",
		"latitude": "32.735687",
		"longitude": "-97.1080656"
	},
	{
		"original address": "Ithaca, New York",
		"returned address": "Ithaca, NY, USA",
		"latitude": "42.4439614",
		"longitude": "-76.5018807"
	},
	{
		"original address": "Lewes, Delaware",
		"returned address": "Lewes, DE, USA",
		"latitude": "38.7745565",
		"longitude": "-75.1393498"
	},
	{
		"original address": "Washington, DC",
		"returned address": "Washington, DC, USA",
		"latitude": "38.8951118",
		"longitude": "-77.0363658"
	},
	{
		"original address": "State College, PA",
		"returned address": "State College, PA, USA",
		"latitude": "40.7933949",
		"longitude": "-77.8600012"
	},
	{
		"original address": "Chicago, IL",
		"returned address": "Chicago, IL, USA",
		"latitude": "41.8781136",
		"longitude": "-87.6297982"
	},
	{
		"original address": "Door County, WI",
		"returned address": "Door, WI, USA",
		"latitude": "44.8341302",
		"longitude": "-87.3770488"
	},
	{
		"original address": "Laax, Switzerland",
		"returned address": "Laax, Switzerland",
		"latitude": "46.8058842",
		"longitude": "9.258219"
	},
	{
		"original address": "Lake Tahoe, CA",
		"returned address": "Lake Tahoe, United States",
		"latitude": "39.1100901",
		"longitude": "-120.0316916"
	},
	{
		"original address": "Sunrise Beach, MO",
		"returned address": "Sunrise Beach, MO, USA",
		"latitude": "38.1758645",
		"longitude": "-92.7843553"
	},
	{
		"original address": "Boston, MA",
		"returned address": "Boston, MA, USA",
		"latitude": "42.3584308",
		"longitude": "-71.0597732"
	},
	{
		"original address": "Dayton, OH",
		"returned address": "Dayton, OH, USA",
		"latitude": "39.7589478",
		"longitude": "-84.1916069"
	},
	{
		"original address": "Pittsburgh, PA",
		"returned address": "Pittsburgh, PA, USA",
		"latitude": "40.4406248",
		"longitude": "-79.9958864"
	},
	{
		"original address": "New Orleans, LA",
		"returned address": "New Orleans, LA, USA",
		"latitude": "29.9510658",
		"longitude": "-90.0715323"
	}
]

data.txt

London, UK
Brooklyn, New York
321 West 37th Street, Manhattan, New York, USA
San Francisco, USA
Zurich, Switzerland
Prague
Nairobi, Kenya
Beijing
Yellowstone National Park
OX1 3PU
Saint Peter's University, Jersey City, NJ
Valencia, Spain
Barcelona, Spain
Milan, Italy
Beersheva, Israel
Tel Aviv, Israel
Jerusalem, Israel
Eliat, Israel
Xi'an, China
Warsaw, Poland
Krakow, Poland
Negril, Jamaica
Cancun, Mexico
Ann Arbor, MI
Madison, WI
Minneapolis, MN
Lawrence, Kansas
Kirksville, MO
St Louis, MO
Kansas City, MO
Jackson Hole, WY
Los Angeles, CA
San Diego, CA
Los Altos, CA
Columbus, OH
Coco Beach, FL
Orlando, FL
Atlanta, GA
Arkadelphia, AR
Philadelphia, PA
Jersey City, NJ
Manchester, UK
Paris, France
Honolulu, HI
Rovinj, Croatia
St Gallen, Switzerland
Amsterdam, The Netherlands
Istanbul, Turkey
Olympus, Turkey
Troy, Turkey
Dallas, Texas
Arlington, Texas
Ithaca, New York
Lewes, Delaware
Washington, DC
State College, PA
Chicago, IL
Door County, WI
Laax, Switzerland
Lake Tahoe, CA
Sunrise Beach, MO
Boston, MA
Dayton, OH
Pittsburgh, PA
New Orleans, LA

index.html

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<style>
			body {
				width: 100%;
				height: 100%;
				margin: 0;
			}

			.geo-globe {
				fill: rgba(0,0,0,0.1);
			}

			.geo-path {
				fill: #132A50; 
				stroke: #FFFFFF;
				stroke-width: 0.2;
			}

				.geo-path:hover {
					fill: #3B5998;
				}

			.geo-node {
				stroke-width: 0.0;
				stroke: rgba(255, 0, 10, 0.66); 
				fill: rgba(255, 0, 10, 0.66); 
			    
			    cursor: pointer;                
			}

				.geo-node:hover {
					stroke: #a00;
					fill: #a00;
				}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
		<script>
			// Initialize some variables:
			var element = 'body',
				  width = $(document).width(),
				  height = $(document).height();

			var radius = 10,	// px
				hoverRadius = 20; // px

			var features, circles;
		    
			// Define the type of map projection we want: (see https://github.com/mbostock/d3/wiki/Geo-Projections)
	    var projection = d3.geo.orthographic()
		    .scale(250) // scale the map
		    .translate([width / 2, height / 2]) // set the center of the map to be the center of the canvas
		    .clipAngle(90);

			// Save the path generator for the current projection:
			var path = d3.geo.path()
			    .projection(projection)
			    .pointRadius( function(d,i) {
		    		return radius;
		    	});

			// Define the longitude and latitude scales, which allow us to map lon/lat coordinates to pixel values:
			var lambda = d3.scale.linear()
			    .domain([0, width])
			    .range([-180, 180]);

			var phi = d3.scale.linear()
			    .domain([0, height])
			    .range([90, -90]);

			// Create the drawing canvas:
			var svg = d3.select("body").append("svg:svg")
			    .attr("width", '100%')
			    .attr("height", '100%');

			//Create a base circle: (could use this to color oceans)
		  var backgroundCircle = svg.append("svg:circle")
	        .attr('cx', width / 2)
	        .attr('cy', height / 2)
	        .attr('r', 0)
	        .attr('class', 'geo-globe');
								
			// Make a <g> tag to group all our countries, which is useful for zoom purposes. (child elements belong to a 'group', which we can zoom all-at-once)
	    var world = svg.append('svg:g');
	    var zoomScale = 1; // default  
	    
	    // Create the element group to mark individual locations:
	    var locations = svg.append('svg:g')
	    	.attr('id', 'locations');

	    // Having defined the projection, update the backgroundCircle radius:
			backgroundCircle.attr('r', projection.scale() );

		    
	    // Construct our world map based on the projection:
	    d3.json('data/world-countries.json', function(collection) { 
	    	 
    		features = world.selectAll('path')
    			.data(collection.features)
    			.enter()
    			.append('svg:path')
    				.attr('class', 'geo-path')
    				.attr('d', path); 
    		
    		features.append('svg:title')
    			.text( function(d) { return d.properties.name; });
			   
			}); // end FUNCTION d3.json()

	    // Load our location data:
	    d3.json('data/data.geojson', function(collection) {

			  // Plot the positions on the map:
  	    circles = locations.selectAll('path')
  	    	.data(collection.features)
  	    	.enter()
  	    	.append('svg:path')
  	    		.attr('class', 'geo-node')
  	    		.attr('d', path)
  	    		.on('mouseover', mouseover)
  	            .on('mouseout', mouseout);
  
  	    circles.append('svg:title')
  	        .text( function(d) { return d.properties.name; } );

			}); // end FUNCTION d3.json()            

			// Specify a few event handlers to allow globe rotation:
			d3.select(window)
			    .on("mousemove", mousemove)
			    .on("mouseup", mouseup);
			
			svg.on('mousedown', mousedown);

			// Setup zoom behavior:
	    var zoom = d3.behavior.zoom(true)
	        .scale( projection.scale() )
	        .scaleExtent([100, 800])
	        .on("zoom", globeZoom);

	    svg.call(zoom)
	    	.on('dblclick.zoom', null);


	    // MOUSE EVENTS //

	    var mousePos;
	    
	    function mouseover(d, i) {
	        	
	    	path.pointRadius( function(d,i) {
	    		return hoverRadius;
	    	});
	    	
	    	// Increase the circle radius, so the user knows she is hovering over this node:
        d3.select(this).attr('d', path);                        
	        
	    }; // end FUNCTION mouseover(d,i)
	    
	    function mouseout(d, i) {
	    	
	    	path.pointRadius( function(d,i) {
	    		return radius;
	    	});
	    	
	    	// Reduce the circle radius to its pre-mouseover state:
        d3.select(this).attr('d', path);   
	        
	    }; // end FUNCTION mouseout(d,i)
	    
	   	function mousedown() {
	    
	    	// Determine mouse pixel coordinates:
		  	mousePos = [d3.event.pageX, d3.event.pageY];
		  	
		  	// Prevent the default behavior for mouse down events:
		  	d3.event.preventDefault();
			  
			}; // end FUNCTION mousedown()
			
			function mousemove() {

				// Has the mouse button been released?
		  	if (mousePos) {
		  		
		  		var p = d3.mouse(svg[0][0]);
			    projection.rotate([lambda(p[0]), phi(p[1])]);
			    svg.selectAll("path").attr("d", path);
				
		    };
			  
			}; // end FUNCTION mousemouse()
			
			function mouseup() {
				
				// Do we have mouse coordinates? 
			  if (mousePos) {
			  	
			  	// Yes, so update the map based on the final mouse coordinates and clear the mouse position:	  	
			    mousemove();
			    mousePos = null;
			    
			  }; 
			  
			}; // end FUNCTION mouseup()
		    
		    
		    
	    // Helper functions //
			
			function globeZoom() {
			    if (d3.event) {
			    	var _scale = d3.event.scale;

			        projection.scale(_scale);
			        backgroundCircle.attr('r', _scale);
			        path.pointRadius( radius );

			        features.attr('d', path);
    				circles.attr('d', path); 

		    	}; // end IF
		    };
		</script>
	</body>
</html>

world-countries.json