Skip to content

Instantly share code, notes, and snippets.

@kenpenn

kenpenn/adams-150x.png

Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kenpenn/16a9c611417ffbfc6129 to your computer and use it in GitHub Desktop.
Save kenpenn/16a9c611417ffbfc6129 to your computer and use it in GitHub Desktop.
Download ZIP
d3 to three
Raw
readme.md

Pictures are a scrollable ul; select "Show All" in the select box to scroll thru all people.

textures for three mesh are generated with topojson and d3

d3 is used for transitions and interpolation

three.js renders the globe

adapted from Mike Bostock's World Tour

and Steve Hall's Interactive WebGL Globes with THREE.js and D3

Tested on os x Mavericks Chrome, Safari, Firefox.

"Show All" sporadically crashes in Chrome Beta on my KitKat Android phone.

Raw
globe-list-3d.js
/*
* demonstrates
* genning textures with topojson and d3
* using d3 for transitions and interpolation,
* and three.js for rendering the globe
*
* adapted from Mike Bostock's World Tour, http://bl.ocks.org/mbostock/4183330
* and Steve Hall's Interactive WebGL Globes with THREE.js and D3,
* http://www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3
*
* all cruft and smells are mine.
*/
(function() {
var genKey = function (arr) {
var key = '';
arr.forEach(function (str) {
key += str.toLowerCase().replace(/[^a-z0-9]/g, '');
});
return key;
};
var peeps = {
data : [],
keys : {},
init : function (people) {
var self = this;
this.data = people;
this.data.forEach(function(peep, px){
var key = genKey([ peep.firstname, peep.lastname, px + '' ])
peep.id = key;
self.keys[key] = { idx : px };
});
},
find : function(key) {
return this.data[this.keys[key].idx];
}
};
var list = {
el: {},
selectBox : {},
listBox : {},
init : function (opts) {
var self = this;
var template = opts.template;
var select = document.createElement('select');
var ul = document.createElement('ul');
this.el = d3.select(opts.selector);
peeps.data.forEach(function (peep) {
select.appendChild(list.crtOption(peep));
ul.appendChild(list.crtLi(peep, opts.template));
});
var showAll = { firstname : 'Show', lastname : 'All', id : 'all'}
select.appendChild(this.crtOption(showAll));
this.selectBox = d3.select(opts.selector + ' .select-box');
this.selectBox.node().appendChild(select);
this.listBox = d3.select(opts.selector + ' .list-box');
this.listBox.node().appendChild(ul);
this.el.selectAll('li img').on('click', function () {
var id = this.parentElement.parentElement.id;
var peep = peeps.find(id);
world.rotateTo([ peep ], 0, 1);
});
this.el.select('select').on('change', function () {
if ( this.value == 'all' ) {
world.rotateTo(peeps.data, 0, peeps.data.length);
} else {
world.rotateTo([peeps.find(this.value)], 0, 1);
}
});
},
crtOption : function (opt) {
var option = document.createElement('option');
option.value = opt.id;
option.textContent = opt.firstname + ' ' + opt.lastname;
return option;
},
crtLi : function (peep, template) {
var li = document.createElement('li');
li.id = peep.id;
var peepBox = document.querySelector(template).cloneNode(true);
var peepName = peepBox.querySelector('.peep-name');
peepName.textContent = peep.firstname + ' ' + peep.lastname;
var peepImg = peepBox.querySelector('img');
peepImg.src = peep.img;
peepImg.alt = 'image of ' + peep.firstname + ' ' + peep.lastname;
var peepLink = peepBox.querySelector('a');
peepLink.href = 'https://twitter.com/' + peep.twitter
var peepHandle = peepBox.querySelector('.twitter');
peepHandle.textContent = '@' + peep.twitter;
li.appendChild(peepBox);
return li;
},
transScroll : function (id) {
var offsetTop = document.querySelector('#' + id).offsetTop;
var scrollTween = function (t) {
return function() {
var terpRound = d3.interpolateRound(this.scrollTop, offsetTop);
return function(t) {
this.scrollTop = terpRound(t);
};
};
};
this.selectBox.select('select').node().value = id;
this.listBox.transition()
.duration(1250)
.tween('scrollTween', scrollTween(0));
}
};
var twoPI = Math.PI * 2;
var halfPI = Math.PI / 2;;
var world = {
el : {},
init : function (opts) {
d3.select('.loading').transition()
.duration(500)
.style('opacity', 0)
.remove();
this.el = d3.select(opts.selector);
this.slug = this.el.select(".slug");
this.gratiColor = d3.rgb(this.sunColor).darker().toString();
this.landColor = d3.rgb(this.countryColor).darker(0.5).toString();
this.borderColor = d3.rgb(this.landColor).darker().toString();
var countries = topojson.feature(opts.data, opts.data.objects.countries).features;
this.geoCache.init(countries, opts.names);
this.initD3(opts);
},
geoCache : {
keys : {},
init : function (countries, names) {
var self = this;
this.countries = countries.filter(function(d) {
return names.some(function(n) {
if (d.id == n.name) {
d.name = d.id;
return d.id = n.id;
}
});
}).sort(function(a, b) {
return a.name.localeCompare(b.name);
});
this.countries.forEach(function(country, cx){
self.keys[country.id] = { name: country.name, idx : cx };
});
},
find : function(id) {
var id = id + '';
return this.keys[id];
}
},
sunColor : '#fbfccc',
countryColor : '#1d721d',
waterColor : '#0419a0',
gratiColor : '',
landColor : '',
borderColor : '',
initD3 : function(opts) {
// creates the textures for three.js globe
var land = topojson.feature(opts.data, opts.data.objects.countries);
var borders = topojson.mesh(
opts.data, opts.data.objects.countries, function(a, b) { return a !== b; }
);
var mapTexture = this.genTexture({ land: land, borders : borders });
var self = this;
// var start = Date.now();
peeps.data.forEach(function(peep, px) {
var marker = self.genGeoMarker( [.7, .4], peep.location.lon, peep.location.lat );
var idx = self.geoCache.find(peep.location.id).idx;
var country = self.geoCache.countries[idx];
peep.texture = self.genTexture({ country: country, marker: marker });
});
// console.log('Peep textures genned in ' + (Date.now() - start) + 'ms')
this.initThree({ selector: opts.selector, mapTexture : mapTexture });
},
glEl : {},
scene : new THREE.Scene(),
globe : new THREE.Object3D(),
initThree : function(opts) {
var segments = 155; // number of vertices. Higher = better mouse accuracy, slower loading
// Set up cache for country textures
this.glEl = this.el.select('.three-box');
var glRect = this.glEl.node().getBoundingClientRect();
var canvas = this.glEl.append('canvas')
.attr('width', glRect.width)
.attr('height', glRect.height);
canvas.node().getContext('webgl');
this.renderer = new THREE.WebGLRenderer({ canvas: canvas.node(), antialias: true });
this.renderer.setSize(glRect.width, glRect.height);
this.renderer.setClearColor( 0x000000 );
this.glEl.node().appendChild(this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(70, glRect.width / glRect.height, 1, 5000);
this.camera.position.z = 1000;
var ambientLight = new THREE.AmbientLight(this.sunColor);
this.scene.add(ambientLight);
var light = new THREE.DirectionalLight( this.sunColor, .85 );
light.position.set(this.camera.position.x, this.camera.position.y + glRect.height/2, this.camera.position.z);
this.scene.add( light );
// base globe with 'water'
var waterMaterial = new THREE.MeshPhongMaterial({ color: this.waterColor, transparent: true });
var sphere = new THREE.SphereGeometry(200, segments, segments);
var baseGlobe = new THREE.Mesh(sphere, waterMaterial);
baseGlobe.rotation.y = Math.PI + halfPI; // centers inital render at lat 0, lon 0
// base map with land, borders, graticule
var mapMaterial = new THREE.MeshPhongMaterial({ map: opts.mapTexture, transparent: true });
var baseMap = new THREE.Mesh(new THREE.SphereGeometry(200, segments, segments), mapMaterial);
baseMap.name = 'land';
baseMap.rotation.y = Math.PI + halfPI;
// add the two meshes to the container object
this.globe.scale.set(2.8, 2.8, 2.8);
this.globe.add(baseGlobe);
this.globe.add(baseMap);
this.scene.add(this.globe);
this.renderer.render(this.scene, this.camera);
var self = this;
window.addEventListener('resize', function(evt) {
requestAnimationFrame(function () {
var glRect = self.glEl.node().getBoundingClientRect();
self.camera.aspect = glRect.width / glRect.height;
self.camera.updateProjectionMatrix();
self.renderer.setSize(glRect.width, glRect.height);
self.renderer.render(self.scene, self.camera);
});
});
},
rotateTo : function (spinTo, sx, sLen) {
var self = this;
var globe = this.globe;
var peep = spinTo[sx];
var from = {
x: globe.rotation.x,
y: globe.rotation.y
};
var to = {
x: this.latToX3(peep.location.lat),
y: this.lonToY3(peep.location.lon)
}
var peepMesh = this.genMesh(peep);
globe.add(peepMesh);
var hasta = globe.getObjectByName(this.currentId);
list.transScroll(peep.id);
this.setSlug(peep);
if (hasta) {
globe.remove(hasta)
requestAnimationFrame(function() { self.renderer.render(self.scene, self.camera); });
}
this.currentId = peep.id;
requestAnimationFrame(function() { self.renderer.render(self.scene, self.camera); });
d3.transition()
.delay(500)
.duration(1250)
.each('start', function() {
self.terpObj = d3.interpolateObject(from, to);
})
.tween('rotate', function() {
return function (t) {
globe.rotation.x = self.terpObj(t).x;
globe.rotation.y = self.terpObj(t).y;
requestAnimationFrame(function() { self.renderer.render(self.scene, self.camera); });
};
})
.transition()
.each('end', function () {
sx += 1;
if (sx < sLen) {
self.rotateTo(spinTo, sx, sLen);
} else {
return;
}
});
},
setSlug : function (peep) {
var self = this;
this.slug.transition()
.duration(500)
.style("opacity", 0)
.each('end', function () {
self.slug.select(".slug-img")
.style("background-image", "url(" + peep.img + ")");
self.slug.select(".name")
.text(peep.firstname + " " + peep.lastname + " - ");
self.slug.select("a")
.attr("href", "https://twitter.com/" + peep.twitter)
self.slug.select(".twitter")
.text("@" + peep.twitter);
self.slug.select('.city')
.text(peep.location.city + ", ");
self.slug.select('.loc').text( function () {
return peep.location.state ? peep.location.state + ", " + peep.location.country : peep.location.country;
});
})
.transition()
.duration(1250)
.style("opacity", 1);
},
genGeoMarker : function (angles, lon, lat) {
var marker = [];
angles.forEach(function (angle) {
marker.push( d3.geo.circle().origin([lon, lat]).angle(angle)() );
});
return marker;
},
genTexture : function(opts) {
var projection = d3.geo.equirectangular().translate([1024, 512]).scale(325);
var graticule;
var canvas = d3.select('body').append('canvas')
.style('display', 'none')
.attr('width', '2048px')
.attr('height', '1024px');
var ctx = canvas.node().getContext('2d');
var path = d3.geo.path()
.projection(projection)
.context(ctx);
if (opts.land) {
graticule = d3.geo.graticule();
ctx.fillStyle = this.landColor, ctx.beginPath(), path(opts.land), ctx.fill();
ctx.strokeStyle = this.borderColor, ctx.lineWidth = .5, ctx.beginPath(), path(opts.borders), ctx.stroke();
ctx.strokeStyle = this.gratiColor, ctx.lineWidth = .25, ctx.beginPath(), path(graticule()), ctx.stroke();
}
if (opts.country) {
ctx.fillStyle = this.countryColor, ctx.beginPath(), path(opts.country), ctx.fill();
}
if (opts.marker) {
ctx.fillStyle = '#fff', ctx.beginPath(), path(opts.marker[0]), ctx.fill();
ctx.strokeStyle = '#000', ctx.lineWidth = 1.5, ctx.beginPath(), path(opts.marker[0]), ctx.stroke();
ctx.fillStyle = '#e500ff', ctx.beginPath(), path(opts.marker[1]), ctx.fill();
}
// DEBUGGING, disable when done.
// testImg(canvas.node().toDataURL());
var texture = new THREE.Texture(canvas.node());
texture.needsUpdate = true;
canvas.remove();
return texture;
},
genMesh : function (peep) {
var material, mesh, rotation;
var segments = 155;
material = new THREE.MeshPhongMaterial({ map: peep.texture, transparent: true });
mesh = new THREE.Mesh(new THREE.SphereGeometry(200, segments, segments), material);
mesh.name = peep.id;
rotation = this.globe.getObjectByName('land').rotation;
mesh.rotation.x = rotation.x;
mesh.rotation.y = rotation.y;
return mesh;
},
/*
x3ToLat & y3ToLon adapted from Peter Lux,
http://www.plux.co.uk/converting-radians-in-degrees-latitude-and-longitude/
convert three.js rotation.x & rotation.y (radians) to lat/lon
globe.rotation.x + blah === northward
globe.rotation.y - blah === southward
globe.rotation.y + blah === westward
globe.rotation.y - blah === eastward
*/
x3ToLat : function(rad) {
// convert radians into latitude
// 90 to -90
// first, get everything into the range -2pi to 2pi
rad = rad % (Math.PI*2);
// convert negatives to equivalent positive angle
if (rad < 0) {
rad = twoPI + rad;
}
// restrict to 0 - 180
var rad180 = rad % (Math.PI);
// anything above 90 is subtracted from 180
if (rad180 > Math.PI/2) {
rad180 = Math.PI - rad180;
}
// if greater than 180, make negative
if (rad > Math.PI) {
rad = -rad180;
} else {
rad = rad180;
}
return (rad/Math.PI*180);
},
latToX3 : function(lat) {
return (lat / 90) * halfPI;
},
y3ToLon : function(rad) {
// convert radians into longitude
// 180 to -180
// first, get everything into the range -2pi to 2pi
rad = rad % twoPI;
if (rad < 0) {
rad = twoPI + rad;
}
// convert negatives to equivalent positive angle
var rad360 = rad % twoPI;
// anything above 90 is subtracted from 360
if (rad360 > Math.PI) {
rad360 = twoPI - rad360;
}
// if greater than 180, make negative
if (rad > Math.PI) {
rad = -rad360;
} else {
rad = rad360;
}
return rad / Math.PI * 180;
},
lonToY3 : function(lon) {
return -(lon / 180) * Math.PI;
}
};
function testImg(dataURI) {
var img = document.createElement('img');
img.src = dataURI;
img.width = 2048;
img.height = 1024;
document.body.appendChild(img);
}
var loaded = function (error, people, geojson, names) {
var listOpts = {
selector : '.peeps-box',
template : '#templates .peep-box'
};
var worldOpts = {
selector : '.globe-box',
data : geojson,
names : names
};
peeps.init(people);
world.init(worldOpts);
list.init(listOpts);
};
window.addEventListener('DOMContentLoaded', function () {
queue()
.defer(d3.json, 'peeps.json')
.defer(d3.json, 'world.json')
.defer(d3.tsv, 'world-country-names.tsv')
.await(loaded);
});
}());
Raw
globe-list.css
* { box-sizing : border-box; }
body {
background: #111;
color: #fff;
font-family: sans-serif;
font-weight:normal;
font-size: 13px;
min-height: 100%;
margin:0;
min-width: 100%;
}
h2::selection,
h3::selection,
p::selection,
span::selection {
background: #ff619b; /* a nod to mr. irish */
}
.loading {
width: 7.692em;
height: 7.692em;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h2 { text-align: center; }
.peeps-box, .globe-box {
position: absolute;
top: 0;
bottom: 0.769em;
}
.peeps-box {
background: #222;
left: 0.769em;
overflow: hidden;
padding: 0.769em;
width: 14.615em;
}
.select-box {
background: #222;
padding-top: 0.769em;
}
.select-box p { margin: 0.25em 0; }
.select-box select {
background: #555;
border: none;
color: #fff;
font-size: 1em;
margin:0;
outline: none;
width: 100%;
}
.list-box {
position: absolute;
top: 5.538em;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.list-box ul, .list-box li { list-style : none; }
.list-box ul {
margin-top: -0.95em;
padding: 0 3em 0 0;
}
.list-box ul li:first-of-type article {
margin-top: 0;
}
.peep-box {
background: #333;
margin: 0.769em 0 0 0;
padding: 0.769em;
width: 13.077em;
}
.peep-box img {
cursor: pointer;
margin: 0;
}
.peep-box .peep-name {
margin: 0 0 0.4em 0;
}
.peep-tweet {
margin: 0.2em 0 0 0;
text-align: right;
}
.twitter {
color: #2aa9e0;
}
.globe-box {
left: 15.384em;
right: 0; /* 0.769em; */
}
.globe-box h3 {
text-align: center;
width: 100%;
}
.three-box {
position: absolute;
top: 6.154em;
bottom: 0;
width: 100%;
}
.slug {
position: absolute;
top: 75%;
left: calc(50% - 11em);
background: #333;
width: 22em;
padding: 0.5em;
}
.slug-img {
background-size: 3.692em 3.692em;
float: left;
margin-right: 0.5em;
width: 3.692em;
height: 3.692em;
}
.slug p {
margin: 0.5em;
text-align: center;
}
.slug p:first-of-type { margin-top: 0.25em; }
.slug p:last-of-type { margin-bottom: 0; }
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>d3 to three</title>
<link rel="stylesheet" href="globe-list.css">
</head>
<body>
<div class="peeps-box">
<div class="select-box">
<p>Select:</p>
</div>
<div class="list-box"></div>
</div>
<div class="globe-box">
<h2>d3 to three</h2>
<h3>click image, or select person to potate</h3>
<div class="three-box">
<div class="loading">Loading...</div>
<div class="slug" style="opacity: 0">
<div class="slug-img"></div>
<p>
<span class="name"></span>
<a href="" target="_blank"><span class="twitter"></span></a>
</p>
<p>
<span class="city"></span>
<span class="loc"></span>
</p>
</div>
</div>
</div>
<div id="templates" style="display:none">
<article class="peep-box">
<p class="peep-name"></p>
<img src="" alt="">
<p class="peep-tweet">
<a href="" target="_blank">
<svg class="twitter-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="1.363em" height="1.108em" version="1.1" viewBox="0 0 171.505 139.378">
<g transform="translate(-282.32053,-396.30734)">
<path fill="#2aa9e0" d="m453.826 412.806c-6.31 2.799-13.092 4.69-20.209 5.54 7.264-4.355 12.844-11.25 15.471-19.467-6.799 4.033-14.329 6.961-22.345 8.538-6.418-6.839-15.562-11.111-25.683-11.111-19.432 0-35.187 15.754-35.187 35.185 0 2.758 0.311 5.444 0.912 8.019-29.243-1.467-55.17-15.476-72.525-36.764-3.029 5.197-4.764 11.24-4.764 17.689 0 12.208 6.212 22.977 15.653 29.287-5.768-0.183-11.193-1.766-15.937-4.401-0.004 0.147-0.004 0.294-0.004 0.442 0 17.048 12.129 31.268 28.226 34.503-2.952 0.804-6.061 1.234-9.27 1.234-2.267 0-4.471-0.221-6.62-0.631 4.478 13.979 17.472 24.151 32.87 24.434-12.042 9.438-27.214 15.063-43.7 15.063-2.84 0-5.641-0.167-8.393-0.492 15.572 9.984 34.067 15.809 53.938 15.809 64.72 0 100.113-53.615 100.113-100.114 0-1.526-0.034-3.043-0.102-4.553 6.874-4.96 12.839-11.156 17.556-18.213z"/>
</g>
</svg>
<span class="twitter"></span>
</a>
</p>
</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="globe-list-3d.js"></script>
</body>
</html>
Raw
peeps.json
[
{
"firstname": "Cameron",
"lastname": "Adams",
"twitter": "themaninblue",
"img": "adams-150x.png",
"location": {
"lat": -33.7969235,
"lon": 150.9224326,
"city": "Sydney",
"country": "Australia",
"id": 36
}
},
{
"firstname": "Mike",
"lastname": "Bostock",
"twitter": "mbostock",
"img": "bostock-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Ricardo",
"lastname": "Cabello",
"twitter": "mrdoob",
"img": "cabello-150x.jpg",
"location": {
"lat": 51.5286416,
"lon": -0.1015987,
"city": "London",
"country": "UK",
"id": 826
}
},
{
"firstname": "Isaac",
"lastname": "Cohen",
"twitter": "Cabbibo",
"img": "cohen-150x.jpg",
"location": {
"lat": 37.7919615,
"lon": -122.2287941,
"city": "Oakland",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Chris",
"lastname": "Coyier",
"twitter": "chriscoyier",
"img": "coyier-150x.jpg",
"location": {
"lat": 43.0578914,
"lon": -87.96743,
"city": "Milwaukee",
"state" : "WI",
"country": "USA",
"id": 840
}
},
{
"firstname": "Pamela",
"lastname": "Fox",
"twitter": "pamelafox",
"img": "fox-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Vitaly",
"lastname": "Friedman",
"twitter": "smashingmag",
"img": "friedman-150x.png",
"location": {
"lat": 47.9873111,
"lon": 7.79642,
"city": "Frieburg",
"country": "Germany",
"id": 276
}
},
{
"firstname": "Steve",
"lastname": "Hall",
"twitter": "DelimitedTech",
"img": "hall-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Marijn",
"lastname": "Haverbeke",
"twitter": "marijnjh",
"img": "haverbeke-150x.jpg",
"location": {
"lat": 52.5075419,
"lon": 13.4251364,
"city": "Berlin",
"country": "Germany",
"id": 276
}
},
{
"firstname": "Dave",
"lastname": "Herman",
"twitter": "littlecalculist",
"img": "herman-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Kitt",
"lastname": "Hodsden",
"twitter": "kitt",
"img": "hodsden-150x.jpg",
"location": {
"lat": 37.4038194,
"lon": -122.081267,
"city": "Mountain View",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Matthew",
"lastname": "Inman",
"twitter": "Oatmeal",
"img": "inman-150x.jpg",
"location": {
"lat": 47.614848,
"lon": -122.3359058,
"city": "Seattle",
"state" : "WA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Paul",
"lastname": "Irish",
"twitter": "paul_irish",
"img": "irish-150x.jpg",
"location": {
"lat": 37.404305,
"lon": -122.1642635,
"city": "Palo Alto",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Ian",
"lastname": "Johnson",
"twitter": "enjalot",
"img": "johnson-150x.jpg",
"location": {
"lat": 37.7919615,
"lon": -122.2287941,
"city": "Oakland",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Andy",
"lastname": "Kirk",
"twitter": "visualisingdata",
"img": "kirk-150x.jpg",
"location": {
"lat": 53.8060025,
"lon": -1.5357323,
"city": "Leeds",
"country": "UK",
"id": 826
}
},
{
"firstname": "Bruce",
"lastname": "Lawson",
"twitter": "brucel",
"img": "lawson-150x.jpg",
"location": {
"lat": 52.4774376,
"lon": -1.8636315,
"city": "Birmingham",
"country": "UK",
"id": 826
}
},
{
"firstname": "Miles",
"lastname": "McCrocklin",
"twitter": "Milr0c",
"img": "mccrocklin-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Ethan",
"lastname": "Marcotte",
"twitter": "beep",
"img": "marcotte-150x.png",
"location": {
"lat": 42.3133735,
"lon": -71.0571571,
"city": "Boston",
"state" : "MA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Elijah",
"lastname": "Meeks",
"twitter": "Elijah_Meeks",
"img": "meeks-150x.jpg",
"location": {
"lat": 37.4249378,
"lon": -122.1703835,
"city": "Stanford",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Ben",
"lastname": "Nadel",
"twitter": "BenNadel",
"img": "nadel-150x.jpg",
"location": {
"lat": 40.7033127,
"lon": -73.979681,
"city": "New York",
"state" : "NY",
"country": "USA",
"id": 840
}
},
{
"firstname": "Santiago",
"lastname": "Ortiz",
"twitter": "moebio",
"img": "ortiz-150x.jpg",
"location": {
"lat": -34.6158527,
"lon": -58.4333203,
"city": "Buenos Aires",
"country": "Argentina",
"id": 32
}
},
{
"firstname": "Tony",
"lastname": "Parisi",
"twitter": "auradeluxe",
"img": "parisi-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "John",
"lastname": "Resig",
"twitter": "jeresig",
"img": "resig-150x.jpg",
"location": {
"lat": 40.645244,
"lon": -73.9449975,
"city": "Brooklyn",
"country": "USA",
"state" : "NY",
"id": 840
}
},
{
"firstname": "Irene",
"lastname": "Ros",
"twitter": "ireneros",
"img": "ros-150x.jpg",
"location": {
"lat": 42.3601397,
"lon": -71.0553883,
"city": "Boston",
"state" : "MA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Remy",
"lastname": "Sharp",
"twitter": "rem",
"img": "sharp-150x.jpg",
"location": {
"lat": 50.8374204,
"lon": -0.1061897,
"city": "Brighton",
"country": "UK",
"id": 826
}
},
{
"firstname": "Jonathan",
"lastname": "Snook",
"twitter": "snookca",
"img": "snook-150x.jpg",
"location": {
"lat": 45.2501566,
"lon": -75.8002568,
"city": "Ottawa",
"country": "Canada",
"id": 124
}
},
{
"firstname": "Nicole",
"lastname": "Sullivan",
"twitter": "stubbornella",
"img": "sullivan-150x.jpg",
"location": {
"lat": 37.7577,
"lon": -122.4376,
"city": "San Francisco",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Lea",
"lastname": "Verou",
"twitter": "LeaVerou",
"img": "verou-150x.png",
"location": {
"lat": 42.3783903,
"lon": -71.1129096,
"city": "Cambridge",
"state" : "MA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Christophe",
"lastname": "Viau",
"twitter": "d3visualization",
"img": "viau-150x.jpg",
"location": {
"lat": 45.5601451,
"lon": -73.7120832,
"city": "Montreal",
"country": "Canada",
"id": 124
}
},
{
"firstname": "David",
"lastname": "Walsh",
"twitter": "davidwalshblog",
"img": "walsh-150x.png",
"location": {
"lat": 43.0849935,
"lon": -89.4064204,
"city": "Madison",
"state" : "WI",
"country": "USA",
"id": 840
}
},
{
"firstname": "Estelle",
"lastname": "Weyl",
"twitter": "estellevw",
"img": "weyl-150x.jpg",
"location": {
"lat": 37.689265,
"lon": -122.300861,
"city": "SF Bay Area",
"state" : "CA",
"country": "USA",
"id": 840
}
},
{
"firstname": "xkcd",
"lastname": "",
"twitter": "xkcdComic",
"img": "xkcd-150x.png",
"location": {
"lat": 42.395542,
"lon": -71.1037479,
"city": "Somerville",
"state" : "MA",
"country": "USA",
"id": 840
}
},
{
"firstname": "Nicholas",
"lastname": "Zakas",
"twitter": "slicknet",
"img": "zakas-150x.jpg",
"location": {
"lat": 37.4038194,
"lon": -122.081267,
"city": "Mountain View",
"state" : "CA",
"country": "USA",
"id": 840
}
}
]
Raw
world-country-names.tsv
id name
-1 Northern Cyprus
-2 Kosovo
-3 Somaliland
4 Afghanistan
8 Albania
10 Antarctica
12 Algeria
16 American Samoa
20 Andorra
24 Angola
28 Antigua and Barbuda
31 Azerbaijan
32 Argentina
36 Australia
40 Austria
44 Bahamas
48 Bahrain
50 Bangladesh
51 Armenia
52 Barbados
56 Belgium
60 Bermuda
64 Bhutan
68 Bolivia
70 Bosnia and Herzegovina
72 Botswana
74 Bouvet Island
76 Brazil
84 Belize
86 British Indian Ocean Territory
90 Solomon Islands
92 British Virgin Islands
96 Brunei
100 Bulgaria
104 Myanmar
108 Burundi
112 Belarus
116 Cambodia
120 Cameroon
124 Canada
132 Cape Verde
136 Cayman Islands
140 Central African Republic
144 Sri Lanka
148 Chad
152 Chile
156 China
158 Taiwan
162 Christmas Island
166 Cocos (Keeling) Islands
170 Colombia
174 Comoros
175 Mayotte
178 Congo
180 Democratic Republic of the Congo
184 Cook Islands
188 Costa Rica
191 Croatia
192 Cuba
196 Cyprus
203 Czech Republic
204 Benin
208 Denmark
212 Dominica
214 Dominican Republic
218 Ecuador
222 El Salvador
226 Equatorial Guinea
231 Ethiopia
232 Eritrea
233 Estonia
234 Faroe Islands
238 Falkland Islands
239 South Georgia and the South Sandwich Islands
242 Fiji
246 Finland
248 Aaland Islands
250 France
254 French Guiana
258 French Polynesia
260 French Southern Territories
262 Djibouti
266 Gabon
268 Georgia
270 Gambia
275 Palestine
276 Germany
288 Ghana
292 Gibraltar
296 Kiribati
300 Greece
304 Greenland
308 Grenada
312 Guadeloupe
316 Guam
320 Guatemala
324 Guinea
328 Guyana
332 Haiti
334 Heard Island and McDonald Islands
336 Vatican City
340 Honduras
344 Hong Kong
348 Hungary
352 Iceland
356 India
360 Indonesia
364 Iran
368 Iraq
372 Ireland
376 Israel
380 Italy
384 Ivory Coast
388 Jamaica
392 Japan
398 Kazakhstan
400 Jordan
404 Kenya
408 North Korea
410 South Korea
414 Kuwait
417 Kyrgyzstan
418 Laos
422 Lebanon
426 Lesotho
428 Latvia
430 Liberia
434 Libya
438 Liechtenstein
440 Lithuania
442 Luxembourg
446 Macao
450 Madagascar
454 Malawi
458 Malaysia
462 Maldives
466 Mali
470 Malta
474 Martinique
478 Mauritania
480 Mauritius
484 Mexico
492 Monaco
496 Mongolia
498 Moldova
499 Montenegro
500 Montserrat
504 Morocco
508 Mozambique
512 Oman
516 Namibia
520 Nauru
524 Nepal
528 Netherlands
531 Curaçao
533 Aruba
534 Sint Maarten
535 Bonaire, Sint Eustatius and Saba
540 New Caledonia
548 Vanuatu
554 New Zealand
558 Nicaragua
562 Niger
566 Nigeria
570 Niue
574 Norfolk Island
578 Norway
580 Northern Mariana Islands
581 United States Minor Outlying Islands
583 Micronesia
584 Marshall Islands
585 Palau
586 Pakistan
591 Panama
598 Papua New Guinea
600 Paraguay
604 Peru
608 Philippines
612 Pitcairn
616 Poland
620 Portugal
624 Guinea-Bissau
626 Timor-Leste
630 Puerto Rico
634 Qatar
638 Reunion
642 Romania
643 Russia
646 Rwanda
652 Saint Bartholomew
654 Saint Helena, Ascension and Tristan da Cunha
659 Saint Kitts and Nevis
660 Anguilla
662 Saint Lucia
663 French Saint Martin
666 Saint Pierre and Miquelon
670 Saint Vincent and the Grenadines
674 San Marino
678 Sao Tome and Principe
682 Saudi Arabia
686 Senegal
688 Serbia
690 Seychelles
694 Sierra Leone
702 Singapore
703 Slovakia
704 Viet Nam
705 Slovenia
706 Somalia
710 South Africa
716 Zimbabwe
724 Spain
728 South Sudan
729 Sudan
740 Suriname
744 Svalbard and Jan Mayen
748 Swaziland
752 Sweden
756 Switzerland
760 Syria
762 Tajikistan
764 Thailand
768 Togo
772 Tokelau
776 Tonga
780 Trinidad and Tobago
784 United Arab Emirates
788 Tunisia
792 Turkey
795 Turkmenistan
796 Turks and Caicos Islands
798 Tuvalu
800 Uganda
804 Ukraine
807 Macedonia
818 Egypt
826 United Kingdom
831 Guernsey
832 Jersey
833 Isle of Man
834 Tanzania
840 United States
850 US Virgin Islands
854 Burkina Faso
858 Uruguay
860 Uzbekistan
862 Venezuela
876 Wallis and Futuna
882 Samoa
887 Yemen
894 Zambia
Display the source blob
Display the rendered blob
Raw
world.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