Wednesday, July 29, 2015

New Project: Interactive Celestial Map with D3

Here's the initial release of my latest project: a configurable, open source interactive celestial map. See details at the page and the readme on the GitHub repository. But before I go on any further, here's an example:

It should zoom and rotate with mouse-wheel/dragging or the equivalent gestures on touch devices. Some mobile browsers seem to be preempted by the OS from receiving touch gestures. Mobile Chrome works fine. Whereas desktop Chrome has a weird glitch where you have to hold the finger/mouse button down until the rotation happens while dragging. On all other browsers I tested a 'flick' will suffice, with a little patience, because it's pretty slow at the moment. It gets a lot faster if you set the limit magnitude for stars lower. Well, there's no way around it: there are a lot of stars in the sky!

How to get it on a web page? Easy: Include all the necessary scripts (sea readme), declare an empty div with id "map" and run the code, like so:

<div id="map"><div>

<script type="text/javascript">
    datapath: ""

Check out the documentation for all the possible configuration parameters. The above linked blog page has a form with all the options to play around with. The repository also contains a page named viewer.html with the same function.

You may have seen the various sky maps on my blog, like half of the pages linked below the header, or this one. Those are all based on a homegrown non-interactive painfully slow sky map program. I've always wanted to make it interactive (and faster), but that would have been a lot of work I don't really have the time for. Well, until I found that d3.js already has all the functionality I needed. line drawing maps, interactions and so on. With some tweaking, like convert all the position from right ascension/declination to latitude/longitude as GeoJSON requires, and a lot more minor and major details that took a lot more time than expected, it's finally good enough to release, and well, here it is.

No comments:

Post a Comment