andy/planetary.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update quake docs to match code

Browse Source
This commit is contained in:
Brandon Tilley 2013-12-23 22:46:51 -08:00
parent 091fe63700
commit 2fec3977be
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/public/examples/quake.ejs
View File

@ -1,6 +1,6 @@
<h1>2013 Earthquake Data</h1> <h1>2013 Earthquake Data</h1>
<p>This is a more advanced example of what can be built with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like D3 scales, DOM manipulation, and loading external data.</p> <p>This is a more advanced example of what can be built with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of [Moment.js](http://momentjs.com/), D3 scales, DOM manipulation, and loading external data.</p>
<p><a href="/examples/quake/index.html">View the demo</a></p> <p><a href="/examples/quake/index.html">View the demo</a></p>
@ -12,7 +12,7 @@
&lt;div id='controls'&gt; &lt;div id='controls'&gt;
&lt;div&gt; &lt;div&gt;
&lt;input id='slider' type='range' min='0' max='100' value='0'&gt; &lt;input id='slider' type='range' min='0' max='100' step='0.1' value='0'&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;span id='date'&gt;&lt;/span&gt;&amp;nbsp; &lt;span id='date'&gt;&lt;/span&gt;&amp;nbsp;
@ -100,6 +100,10 @@
var currentTime = start; var currentTime = start;
var lastTick = new Date().getTime(); var lastTick = new Date().getTime();
var updateDate = function() {
d3.select('#date').text(moment(currentTime).utc().format(&quot;MMM DD YYYY HH:mm UTC&quot;));
};
// A scale that maps a percentage of playback to a time // A scale that maps a percentage of playback to a time
// from the data; for example, `50` would map to the halfway // from the data; for example, `50` would map to the halfway
// mark between the first and last items in our data array. // mark between the first and last items in our data array.
@ -121,7 +125,7 @@
d3.select('#slider') d3.select('#slider')
.on('change', function(d) { .on('change', function(d) {
currentTime = percentToDate(d3.event.target.value); currentTime = percentToDate(d3.event.target.value);
d3.select('#date').text(new Date(currentTime)); updateDate();
}) })
.call(d3.behavior.drag() .call(d3.behavior.drag()
.on('dragstart', function() { .on('dragstart', function() {
@ -169,7 +173,7 @@
currentTime += dataDelta; currentTime += dataDelta;
if (currentTime &gt; end) currentTime = start; if (currentTime &gt; end) currentTime = start;
d3.select('#date').text(new Date(currentTime)); updateDate();
d3.select('#slider').property('value', percentToDate.invert(currentTime)); d3.select('#slider').property('value', percentToDate.invert(currentTime));
lastTick = now; lastTick = now;
}); });