Update site
This commit is contained in:
Brandon Tilley
parent
0cbe05ce7c
commit
30cce6737b
@ -1 +1 @@
|
|||||||
html,body{font-size:15px;font-family:"Open Sans","Helvetica Neue","Helvetica","Arial",sans-serif}body{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-family:"Source Sans Pro","Helvetica Neue","Helvetica","Arial",sans-serif}h1.subheader,h2.subheader,h3.subheader,h4.subheader,h5.subheader,h6.subheader{font-weight:300}h1.title-header,h2.title-header{margin-top:0px;margin-bottom:10px}.content.container{padding-top:50px}.content.container .slim{max-width:1108px;padding:0 20px;margin:0 auto}.centered{text-align:center}.feature-list{font-size:17px}.feature-list .icon{margin-right:5px !important}a.ui.icon.header{text-decoration:none;color:black}a.ui.icon.header:hover{color:blue}.divider .icon.huge{font-size:2em}.footer .text{text-align:center}canvas{width:350px;height:350px}@media screen and (max-width:768px){.hide-on-mobile{display:none !important}.ui.grid>.wide.column{width:auto !important;min-width:100%}}.column h1:first-child{padding-top:0;margin-top:0}@media screen and (min-width:769px){.hide-on-non-mobile{display:none !important}.main-menu .items{text-align:center;max-width:900px}}@media screen and (min-width:1050px){.main-menu{padding-left:8%}}.spacer{display:inline-block;width:50px}.ui.large.menu .item.minor{font-size:14px}.homepage-globe-canvas{text-align:right}@media screen and (max-width:998px){.homepage-globe-canvas{text-align:center}}.ui.dark.blue.label{background-color:#000080 !important}.ui.dark.blue.label:before{background-color:#000080 !important}.no-underline{text-decoration:none}.ui.menu .item.contains-subitems{padding-top:0;padding-bottom:0;margin-top:0}.ui.menu .item.contains-subitems:before{width:0;height:0}pre{font-size:14px;overflow-x:auto}
|
html,body{font-size:15px;font-family:"Open Sans","Helvetica Neue","Helvetica","Arial",sans-serif}body{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-family:"Source Sans Pro","Helvetica Neue","Helvetica","Arial",sans-serif}h1.subheader,h2.subheader,h3.subheader,h4.subheader,h5.subheader,h6.subheader{font-weight:300}h1.title-header,h2.title-header{margin-top:0px;margin-bottom:10px}.content.container{padding-top:50px}.content.container .slim{max-width:1108px;padding:0 20px;margin:0 auto}.centered{text-align:center}.feature-list{font-size:17px}.feature-list .icon{margin-right:5px !important}a.ui.icon.header{text-decoration:none;color:black}a.ui.icon.header:hover{color:blue}.divider .icon.huge{font-size:2em}.footer .text{text-align:center}canvas#homepage-globe-canvas{width:350px;height:350px}@media screen and (max-width:768px){.hide-on-mobile{display:none !important}.ui.grid>.wide.column{width:auto !important;min-width:100%}}.column h1:first-child{padding-top:0;margin-top:0}@media screen and (min-width:769px){.hide-on-non-mobile{display:none !important}.main-menu .items{text-align:center;max-width:900px}}@media screen and (min-width:1050px){.main-menu{padding-left:8%}}.spacer{display:inline-block;width:50px}.ui.large.menu .item.minor{font-size:14px}.homepage-globe-canvas{text-align:right}@media screen and (max-width:998px){.homepage-globe-canvas{text-align:center}}.ui.dark.blue.label{background-color:#000080 !important}.ui.dark.blue.label:before{background-color:#000080 !important}.no-underline{text-decoration:none}.ui.menu .item.contains-subitems{padding-top:0;padding-bottom:0;margin-top:0}.ui.menu .item.contains-subitems:before{width:0;height:0}pre{font-size:14px;overflow-x:auto}.ui.items.examples a.item{text-decoration:none}
|
||||||
@ -92,6 +92,7 @@
|
|||||||
<li><a href="/documentation/builtin_drag.html">Drag</a> - enables mouse-based rotation of the globe via dragging</li>
|
<li><a href="/documentation/builtin_drag.html">Drag</a> - enables mouse-based rotation of the globe via dragging</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Built-in plugins exposed as properties on <code>planetaryjs.plugins</code>.</p>
|
<p>Built-in plugins exposed as properties on <code>planetaryjs.plugins</code>.</p>
|
||||||
|
<p>If you do not specify any plugins (globally or per-instance), Planetary.js will use the <code>earth</code> and <code>pings</code> plugins with their default settings.</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
85
examples/index.html
Normal file
85
examples/index.html
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Planetary.js: Awesome interactive globes for the web</title>
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
|
||||||
|
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||||
|
|
||||||
|
<link href="/css/prism.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class='ui fixed inverted large menu main-menu'>
|
||||||
|
<div class='items'>
|
||||||
|
<a class='item title' href='/index.html'>
|
||||||
|
<i class='globe icon'></i>Planetary.js
|
||||||
|
</a>
|
||||||
|
<span class='spacer hide-on-mobile'></span>
|
||||||
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
||||||
|
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor active' href='/examples/'>
|
||||||
|
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor ' href='/documentation/'>
|
||||||
|
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
||||||
|
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class='content container'>
|
||||||
|
<div class='page ui slim stackable grid'>
|
||||||
|
<div class='sixteen wide column'>
|
||||||
|
<h1>Examples</h1>
|
||||||
|
|
||||||
|
<p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
|
||||||
|
|
||||||
|
<div class='ui four connected items examples'>
|
||||||
|
<div class='row'>
|
||||||
|
<a class='item' href='/examples/basic.html'>
|
||||||
|
<div class='content'>
|
||||||
|
<div class='name'>Basic Globe</div>
|
||||||
|
<p class='description'>It doesn't get any simpler than this:
|
||||||
|
just a static globe.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class='item' href='/examples/rotating.html'>
|
||||||
|
<div class='content'>
|
||||||
|
<div class='name'>Rotating Globe</div>
|
||||||
|
<p class='description'>If there's one thing that's better than
|
||||||
|
a globe, it's a globe that rotates.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class='item' href='/examples/mouse.html'>
|
||||||
|
<div class='content'>
|
||||||
|
<div class='name'>Mouse Interaction</div>
|
||||||
|
<p class='description'>See how to use the mouse to rotate
|
||||||
|
and zoom the globe.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class='item' href='/examples/quake/index.html'>
|
||||||
|
<div class='content'>
|
||||||
|
<div class='name'>Earthquake Data</div>
|
||||||
|
<p class='description'>A visualization of 2013 seismic activity.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type='text/javascript' src='/js/prism.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
examples/quake/index.html
Normal file
101
examples/quake/index.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Planetary.js: Awesome interactive globes for the web</title>
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
|
||||||
|
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||||
|
|
||||||
|
<link href="/css/prism.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: rgb(0, 26, 34);
|
||||||
|
background: url('sky.jpg');
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#magnitues {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 30px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 5px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
position: absolute;
|
||||||
|
width: 400px;
|
||||||
|
bottom: 5px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -200px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class='ui fixed inverted large menu main-menu'>
|
||||||
|
<div class='items'>
|
||||||
|
<a class='item title' href='/index.html'>
|
||||||
|
<i class='globe icon'></i>Planetary.js
|
||||||
|
</a>
|
||||||
|
<span class='spacer hide-on-mobile'></span>
|
||||||
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
||||||
|
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor active' href='/examples/'>
|
||||||
|
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor ' href='/documentation/'>
|
||||||
|
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
||||||
|
</a>
|
||||||
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
||||||
|
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<canvas id='quakeCanvas'></canvas>
|
||||||
|
<h1>Earthquakes: 2013</h1>
|
||||||
|
<ul id='magnitues'></ul>
|
||||||
|
|
||||||
|
<div id='controls'>
|
||||||
|
<div>
|
||||||
|
<input id='slider' type='range' min='0' max='100' value='0'>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span id='date'></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script type='text/javascript' src="/js/lib/d3.v3.min.js"></script>
|
||||||
|
<script type='text/javascript' src="/js/lib/topojson.v1.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/lib/planetaryjs.min.js"></script>
|
||||||
|
|
||||||
|
<script type='text/javascript' src='/examples/quake/quake.js'></script>
|
||||||
|
<script type='text/javascript' src='/js/prism.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
283
examples/quake/quake.js
Normal file
283
examples/quake/quake.js
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
(function() {
|
||||||
|
var canvas = document.getElementById('quakeCanvas');
|
||||||
|
|
||||||
|
// Create our Planetary.js planet and set some initial values;
|
||||||
|
// we use several custom plugins, defined at the bottom of the file
|
||||||
|
var planet = planetaryjs.planet();
|
||||||
|
planet.loadPlugin(autocenter({extraHeight: -120}));
|
||||||
|
planet.loadPlugin(autoscale({extraHeight: -120}));
|
||||||
|
planet.loadPlugin(planetaryjs.plugins.earth({
|
||||||
|
topojson: { file: '/world-110m.json' },
|
||||||
|
oceans: { fill: '#001320' },
|
||||||
|
land: { fill: '#06304e' },
|
||||||
|
borders: { stroke: '#001320' }
|
||||||
|
}));
|
||||||
|
planet.loadPlugin(planetaryjs.plugins.pings({}));
|
||||||
|
planet.loadPlugin(zoom());
|
||||||
|
planet.loadPlugin(drag({
|
||||||
|
onDragStart: function() {
|
||||||
|
planet.plugins.autorotate.pause();
|
||||||
|
},
|
||||||
|
onDragEnd: function() {
|
||||||
|
planet.plugins.autorotate.resume();
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
planet.loadPlugin(autorotate(5));
|
||||||
|
planet.projection.rotate([100, -10, 0]);
|
||||||
|
planet.draw(canvas);
|
||||||
|
|
||||||
|
|
||||||
|
// Create a color scale for the various earthquake magnitudes; the
|
||||||
|
// mininum magnitude in our data set is 2.5.
|
||||||
|
var colors = d3.scale.pow()
|
||||||
|
.exponent(2)
|
||||||
|
.domain([2, 6,10])
|
||||||
|
.range(['rgb(255,255,204)', 'rgb(253,141,60)','rgb(128,0,38)'])
|
||||||
|
.clamp(true);
|
||||||
|
// Also create a scale for mapping magnitues to ping angle sizes
|
||||||
|
var angles = d3.scale.pow()
|
||||||
|
.exponent(2)
|
||||||
|
.domain([2.5, 10])
|
||||||
|
.range([0.5, 15])
|
||||||
|
.clamp(true);
|
||||||
|
|
||||||
|
// Create a key to show the magnitues and their colors
|
||||||
|
d3.select('#magnitues').selectAll('li')
|
||||||
|
.data(colors.ticks(9))
|
||||||
|
.enter()
|
||||||
|
.append('li')
|
||||||
|
.style('color', colors)
|
||||||
|
.text(function(d) {
|
||||||
|
return "Magnitude " + d;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Load our earthquake data and set up the controls.
|
||||||
|
// The data consists of an array of objects in the following format:
|
||||||
|
// {
|
||||||
|
// mag: magnitude_of_quake
|
||||||
|
// lng: longitude_coordinates
|
||||||
|
// lat: latitude_coordinates
|
||||||
|
// time: timestamp_of_quake
|
||||||
|
// }
|
||||||
|
// The data is ordered, with the earliest data being the first in the file.
|
||||||
|
d3.json('/examples/quake/year_quakes_small.json', function(err, data) {
|
||||||
|
if (err) {
|
||||||
|
alert("Problem loading the quake data.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = parseInt(data[0].time, 10);
|
||||||
|
var end = parseInt(data[data.length - 1].time, 10);
|
||||||
|
var currentTime = start;
|
||||||
|
var lastTick = new Date().getTime();
|
||||||
|
|
||||||
|
// A scale that maps a percentage of playback to a time
|
||||||
|
// from the data; for example, `50` would map to the halfway
|
||||||
|
// mark between the first and last items in our data array.
|
||||||
|
var percentToDate = d3.scale.linear()
|
||||||
|
.domain([0, 100])
|
||||||
|
.range([start, end]);
|
||||||
|
|
||||||
|
// A scale that maps real time passage to data playback time.
|
||||||
|
// 12 minutes of real time maps to the entirety of the
|
||||||
|
// timespan covered by the data.
|
||||||
|
var realToData = d3.scale.linear()
|
||||||
|
.domain([0, 1000 * 60 * 12])
|
||||||
|
.range([0, end - start]);
|
||||||
|
|
||||||
|
var paused = false;
|
||||||
|
|
||||||
|
// Pause playback and update the time display
|
||||||
|
// while scrubbing using the range input.
|
||||||
|
d3.select('#slider')
|
||||||
|
.on('change', function(d) {
|
||||||
|
currentTime = percentToDate(d3.event.target.value);
|
||||||
|
d3.select('#date').text(new Date(currentTime));
|
||||||
|
})
|
||||||
|
.call(d3.behavior.drag()
|
||||||
|
.on('dragstart', function() {
|
||||||
|
paused = true;
|
||||||
|
})
|
||||||
|
.on('dragend', function() {
|
||||||
|
paused = false;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// The main playback loop; for each tick, we'll see how much
|
||||||
|
// time passed in our accelerated playback reel and find all
|
||||||
|
// the earthquakes that happened in that timespan, adding
|
||||||
|
// them to the globe with a color and angle relative to their magnitudes.
|
||||||
|
d3.timer(function() {
|
||||||
|
var now = new Date().getTime();
|
||||||
|
|
||||||
|
if (paused) {
|
||||||
|
lastTick = now;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var realDelta = now - lastTick;
|
||||||
|
// Avoid switching back to the window only to see thousands of pings;
|
||||||
|
// if it's been more than 500 milliseconds since we've updated playback,
|
||||||
|
// we'll just set the value to 500 milliseconds.
|
||||||
|
if (realDelta > 500) realDelta = 500;
|
||||||
|
var dataDelta = realToData(realDelta);
|
||||||
|
|
||||||
|
var toPing = data.filter(function(d) {
|
||||||
|
return d.time > currentTime && d.time <= currentTime + dataDelta;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (var i = 0; i < toPing.length; i++) {
|
||||||
|
var ping = toPing[i];
|
||||||
|
planet.plugins.pings.add(ping.lat, ping.lng, {
|
||||||
|
// Here we use the `angles` and `colors` scales we built earlier
|
||||||
|
// to convert magnitudes to appropriate angles and colors.
|
||||||
|
angle: angles(ping.mag),
|
||||||
|
color: colors(ping.mag)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
currentTime += dataDelta;
|
||||||
|
d3.select('#date').text(new Date(currentTime));
|
||||||
|
d3.select('#slider').property('value', percentToDate.invert(currentTime));
|
||||||
|
lastTick = now;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Plugin to resize the canvas to fill the window and to
|
||||||
|
// automatically center the planet when the window size changes
|
||||||
|
function autocenter(options) {
|
||||||
|
var needsCentering = false;
|
||||||
|
var resize = function() {
|
||||||
|
var width = window.innerWidth + (options.extraWidth || 0);
|
||||||
|
var height = window.innerHeight + (options.extraHeight || 0);
|
||||||
|
planet.canvas.width = width;
|
||||||
|
planet.canvas.height = height;
|
||||||
|
planet.projection.translate([width / 2, height / 2]);
|
||||||
|
};
|
||||||
|
|
||||||
|
return function(planet) {
|
||||||
|
planet.onInit(function() {
|
||||||
|
needsCentering = true;
|
||||||
|
d3.select(window).on('resize', function() {
|
||||||
|
needsCentering = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
planet.onDraw(function() {
|
||||||
|
if (needsCentering) { resize(); needsCentering = false; }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Plugin to automatically scale the planet's projection based
|
||||||
|
// on the window size when the planet is initialized
|
||||||
|
function autoscale(options) {
|
||||||
|
return function(planet) {
|
||||||
|
planet.onInit(function() {
|
||||||
|
var width = window.innerWidth + (options.extraWidth || 0);
|
||||||
|
var height = window.innerHeight + (options.extraHeight || 0);
|
||||||
|
planet.projection.scale(Math.min(width, height) / 2);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Plugin to automatically rotate the globe around its vertical
|
||||||
|
// axis a configured number of degrees every second.
|
||||||
|
function autorotate(degPerSec) {
|
||||||
|
return function(planet) {
|
||||||
|
var lastTick = null;
|
||||||
|
var paused = false;
|
||||||
|
planet.plugins.autorotate = {
|
||||||
|
pause: function() { paused = true; },
|
||||||
|
resume: function() { paused = false; }
|
||||||
|
};
|
||||||
|
planet.onDraw(function() {
|
||||||
|
if (paused || !lastTick) {
|
||||||
|
lastTick = new Date();
|
||||||
|
} else {
|
||||||
|
var now = new Date();
|
||||||
|
var delta = now - lastTick;
|
||||||
|
var rotation = planet.projection.rotate();
|
||||||
|
rotation[0] += degPerSec * delta / 1000;
|
||||||
|
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||||
|
planet.projection.rotate(rotation);
|
||||||
|
lastTick = now;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Plugin to allow zooming with the mouse wheel
|
||||||
|
function zoom(options) {
|
||||||
|
return function(planet) {
|
||||||
|
planet.onInit(function() {
|
||||||
|
var zoom = d3.behavior.zoom()
|
||||||
|
.scale(planet.projection.scale())
|
||||||
|
.scaleExtent([50, 5000])
|
||||||
|
.on('zoom', function() {
|
||||||
|
planet.projection.scale(d3.event.scale);
|
||||||
|
});
|
||||||
|
d3.select(planet.canvas).call(zoom);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Plugin to allow rotating the globe by dragging with the mouse
|
||||||
|
function drag(options) {
|
||||||
|
var options = options || {};
|
||||||
|
var noop = function() {};
|
||||||
|
var onDragStart = options.onDragStart || noop;
|
||||||
|
var onDragEnd = options.onDragEnd || noop;
|
||||||
|
var onDrag = options.onDrag || noop;
|
||||||
|
return function(planet) {
|
||||||
|
planet.onInit(function() {
|
||||||
|
var drag = d3.behavior.drag()
|
||||||
|
.on('dragstart', onDragStart)
|
||||||
|
.on('dragend', onDragEnd)
|
||||||
|
.on('drag', function() {
|
||||||
|
onDrag();
|
||||||
|
var dx = d3.event.dx;
|
||||||
|
var dy = d3.event.dy;
|
||||||
|
var rotation = planet.projection.rotate();
|
||||||
|
var radius = planet.projection.scale();
|
||||||
|
// Dragging from the center of the planet to the edge
|
||||||
|
// of the planet should rotate it 90 degrees
|
||||||
|
var scale = d3.scale.linear()
|
||||||
|
.domain([-1 * radius, radius])
|
||||||
|
.range([-90, 90]);
|
||||||
|
var degX = scale(dx);
|
||||||
|
var degY = scale(dy);
|
||||||
|
rotation[0] += degX;
|
||||||
|
rotation[1] -= degY;
|
||||||
|
if (rotation[1] > 90) rotation[1] = 90;
|
||||||
|
if (rotation[1] < -90) rotation[1] = -90;
|
||||||
|
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||||
|
planet.projection.rotate(rotation);
|
||||||
|
});
|
||||||
|
d3.select(planet.canvas).call(drag);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
// var addWithMag = function(mag, time) {
|
||||||
|
// setTimeout(function() {
|
||||||
|
// var lng = planet.projection.rotate()[0];
|
||||||
|
// planet.plugins.pings.add(0, lng * -1, {
|
||||||
|
// color: colors(mag),
|
||||||
|
// angle: angles(mag)
|
||||||
|
// });
|
||||||
|
// }, time)
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// doThemAll = function() {
|
||||||
|
// for(var i = 1; i <= 10; i++) {
|
||||||
|
// addWithMag(i, i * 2000);
|
||||||
|
// }
|
||||||
|
// setTimeout(doThemAll, 10 * 2000);
|
||||||
|
// }
|
||||||
|
// doThemAll();
|
||||||
BIN
examples/quake/sky.jpg
Normal file
BIN
examples/quake/sky.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
1
examples/quake/year_quakes_small.json
Normal file
1
examples/quake/year_quakes_small.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user