diff --git a/site/public/examples/quake.ejs b/site/public/examples/quake.ejs index 94639ed..cdda849 100644 --- a/site/public/examples/quake.ejs +++ b/site/public/examples/quake.ejs @@ -1,6 +1,6 @@
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.
+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.
@@ -12,7 +12,7 @@ <div id='controls'> <div> - <input id='slider' type='range' min='0' max='100' value='0'> + <input id='slider' type='range' min='0' max='100' step='0.1' value='0'> </div> <div> <span id='date'></span> @@ -100,6 +100,10 @@ var currentTime = start; var lastTick = new Date().getTime(); + var updateDate = function() { + d3.select('#date').text(moment(currentTime).utc().format("MMM DD YYYY HH:mm UTC")); + }; + // 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. @@ -121,7 +125,7 @@ d3.select('#slider') .on('change', function(d) { currentTime = percentToDate(d3.event.target.value); - d3.select('#date').text(new Date(currentTime)); + updateDate(); }) .call(d3.behavior.drag() .on('dragstart', function() { @@ -169,7 +173,7 @@ currentTime += dataDelta; if (currentTime > end) currentTime = start; - d3.select('#date').text(new Date(currentTime)); + updateDate(); d3.select('#slider').property('value', percentToDate.invert(currentTime)); lastTick = now; });