Created
June 4, 2012 01:58
-
-
Save marcneuwirth/2865882 to your computer and use it in GitHub Desktop.
D3 Globe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<svg id="defs"> | |
<defs> | |
<linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%"> | |
<stop offset="0%" style="stop-color:#005C99;stop-opacity:1" /> | |
<stop offset="100%" style="stop-color:#0099FF;stop-opacity:1" /> | |
</linearGradient> | |
<filter id="glow"> | |
<feColorMatrix type="matrix" | |
values= | |
"0 0 0 0 0 | |
0 0 0 0.9 0 | |
0 0 0 0.9 0 | |
0 0 0 1 0"/> | |
<feGaussianBlur stdDeviation="5.5" result="coloredBlur"/> | |
<feMerge> | |
<feMergeNode in="coloredBlur"/> | |
<feMergeNode in="SourceGraphic"/> | |
</feMerge> | |
</filter> | |
</defs> | |
</svg> | |
<script src="http://marcneuwirth.com/experiments/globe/d3.custom.js"></script> | |
<script src="script.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
;(function(w, d3, undefined){ | |
"use strict"; | |
var width, height; | |
function getSize(){ | |
width = w.innerWidth, | |
height = w.innerHeight; | |
if(width === 0 || height === 0){ | |
setTimeout(function(){ | |
getSize(); | |
}, 100); | |
} | |
else { | |
init(); | |
} | |
} | |
function init(){ | |
//Setup path for outerspace | |
var space = d3.geo.azimuthal() | |
.mode("equidistant") | |
.translate([width / 2, height / 2]); | |
space.scale(space.scale() * 3); | |
var spacePath = d3.geo.path() | |
.projection(space) | |
.pointRadius(1); | |
//Setup path for globe | |
var projection = d3.geo.azimuthal() | |
.mode("orthographic") | |
.translate([width / 2, height / 2]); | |
var scale0 = projection.scale(); | |
var path = d3.geo.path() | |
.projection(projection) | |
.pointRadius(2); | |
//Setup zoom behavior | |
var zoom = d3.behavior.zoom(true) | |
.translate(projection.origin()) | |
.scale(projection.scale()) | |
.scaleExtent([100, 800]) | |
.on("zoom", move); | |
var circle = d3.geo.greatCircle(); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.call(zoom) | |
.on("dblclick.zoom", null); | |
//Create a list of random stars and add them to outerspace | |
var starList = createStars(300); | |
var stars = svg.append("g") | |
.selectAll("g") | |
.data(starList) | |
.enter() | |
.append("path") | |
.attr("class", "star") | |
.attr("d", function(d){ | |
spacePath.pointRadius(d.properties.radius); | |
return spacePath(d); | |
}); | |
svg.append("rect") | |
.attr("class", "frame") | |
.attr("width", width) | |
.attr("height", height); | |
//Create the base globe | |
var backgroundCircle = svg.append("circle") | |
.attr('cx', width / 2) | |
.attr('cy', height / 2) | |
.attr('r', projection.scale()) | |
.attr('class', 'globe') | |
.attr("filter", "url(#glow)") | |
.attr("fill", "url(#gradBlue)"); | |
var g = svg.append("g"), | |
features; | |
//Add all of the countries to the globe | |
d3.json("world-countries.json", function(collection) { | |
features = g.selectAll(".feature").data(collection.features); | |
features.enter().append("path") | |
.attr("class", "feature") | |
.attr("d", function(d){ return path(circle.clip(d)); }); | |
}); | |
//Redraw all items with new projections | |
function redraw(){ | |
features.attr("d", function(d){ | |
return path(circle.clip(d)); | |
}); | |
stars.attr("d", function(d){ | |
spacePath.pointRadius(d.properties.radius); | |
return spacePath(d); | |
}); | |
} | |
function move() { | |
if(d3.event){ | |
var scale = d3.event.scale; | |
var origin = [d3.event.translate[0] * -1, d3.event.translate[1]]; | |
projection.scale(scale); | |
space.scale(scale * 3); | |
backgroundCircle.attr('r', scale); | |
path.pointRadius(2 * scale / scale0); | |
projection.origin(origin); | |
circle.origin(origin); | |
//globe and stars spin in the opposite direction because of the projection mode | |
var spaceOrigin = [origin[0] * -1, origin[1] * -1]; | |
space.origin(spaceOrigin); | |
redraw(); | |
} | |
} | |
function createStars(number){ | |
var data = []; | |
for(var i = 0; i < number; i++){ | |
data.push({ | |
geometry: { | |
type: 'Point', | |
coordinates: randomLonLat() | |
}, | |
type: 'Feature', | |
properties: { | |
radius: Math.random() * 1.5 | |
} | |
}); | |
} | |
return data; | |
} | |
function randomLonLat(){ | |
return [Math.random() * 360 - 180, Math.random() * 180 - 90]; | |
} | |
} | |
getSize(); | |
}(window, d3)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #444444; | |
background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#333)); | |
background-image: -webkit-linear-gradient(left top, #000, #333); | |
background-image: -moz-linear-gradient(left top, #000, #333); | |
overflow: hidden; | |
} | |
#info { | |
position: absolute; | |
z-index: 10; | |
left: 25px; | |
top: 25px; | |
} | |
#defs { | |
height: 0; | |
width:0; | |
} | |
.frame { | |
fill: none; | |
pointer-events: all; | |
} | |
.feature { | |
fill: #6CCC00; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.globe { | |
stroke: rgba(255, 255, 255, .5); | |
stroke-width: .25px; | |
} | |
.star { | |
fill: #fff; | |
stroke: rgba(255, 255, 255, .5); | |
stroke-width: .25px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment