Skip to content

Instantly share code, notes, and snippets.

@kgryte

kgryte/README.md

Last active August 29, 2016 02:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kgryte/5566151 to your computer and use it in GitHub Desktop.
Save kgryte/5566151 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js + Orthographic Projection
Raw
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.

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