Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
D3 Globe
<!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>
;(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));
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;
}
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