D3-Celestial animated planets

Now that I have solar system objects in the interactive d3-celestial map, I can, with only a bit more effort, make a pretty temporal animation with it, loke below.

Apart from including the necessary javascript libraries, this is the code to do that: var reqID, reqAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame, cncAnimFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame, dt = new Date(); Celestial.display({ location:true, projection:"equirectangular", datapath: "http://ofrohn.github.io/data/", planets: {show: true}, dsos: {show: false}, constellations: {names: false}, stars: {names: false, limit: 4.6} }); function animate() { reqID = reqAnimFrame(animate); dt.setDate(dt.getDate()+1); Celestial.date(dt); } d3.select('#celestial-map').on('mousedown', function() { cncAnimFrame(reqID) } ) d3.select('#celestial-map').on('mouseup', function() { reqAnimFrame(animate) } ) reqID = reqAnimFrame(animate);

As you can see, most of it is configuration and javascript animation stuff, the essential d3-celestial function needed is Celestial.date(dt) to change the date.

See some more d3-celestial examples here, play with it here or check out the documentation and/or fork/download the source from the GitHub repository.