Celestial map with D3.js

Interactive, adaptable celestial map done with the D3.js visualization library. So, GeoJSON for sky stuff. Which surprisingly nobody has done yet, it seems.

Features display of stars and deep sky objects (DSOs) with a selectable magnitude limit up to 6, or choose different GeoJSON data source for higher magnitudes. Also shows constellations with names, lines and/or boundaries, the Milky Way band and grid lines. Alternate coordinate spaces e.g. ecliptc, galactic or supergalactic are also possible. Full support for zoom and rotation with mouse or gestures.

Since it uses D3.js and HTML5 canvas, it needs a modern browser with canvas support, so any recent flavor of Chrome/Firefox/Safari/Opera or IE 9 and above should suffice. Check out the demo at armchairastronautics.blogspot.com or clone/download it for local usage, which works with Chrome if it is started with command line parameter --allow-file-access-from-files to load local json files. Or use a local web server environment, quite easy to do with node.js.

__Demos__:
Simple map with editable configuration
Interactive form map viewer with all config options
Wall map for printing
Setting time/location and see the current sky
Animated planets moving about the ecliptic
Starry sky just the stars
Alternative Stars different way to display stars
Summer triangle adding data
Supernova remnants adding point data
Traditional Chinese constellation a different culture altogether
\(Source files on github\)

__Some more examples__:
Embedded interactive form
Spinning sky globe
The Milky Way halo, globular clusters & satellite galaxies
The Local Group of galaxies
Asterisms with locations & time selection
Asterisms with zoom & pan
Zoom & pan animations
A different kind of Messier marathon
Show coordinates, DSO colors, Download button
Geolocator gadget part I: Geolocator globe - Part II: Daylight sky - Part III: Geomarker - Part IV: Night sky

$3

* On your HTML add a div with some id, e.g.:

.

* Optionally add a div with the id "celestial-form" if you are going to use some of the built-in forms:

.

* Include the d3-celestial script, available as celestial.js or celestial.min.js.

* Include the necessary d3 scripts: d3.min.js and d3.geo.projection.min.js. Available on the lib subfolder in this repository or from the official d3.js server http://d3js.org/.

* On your script display the map with Celestial.display(config). Remember to indicate the id of the div where the map will be shown. Check and edit the following default configuration file.

``js
var config = {
width: 0, // Default width, 0 = full parent element width;
// height is determined by projection
projection: "aitoff", // Map projection used: see below
projectionRatio: null, // Optional override for default projection ratio
transform: "equatorial", // Coordinate transformation: equatorial (default),
// ecliptic, galactic, supergalactic
center: null, // Initial center coordinates in set transform
// [longitude, latitude, orientation] all in degrees
// null = default center [0,0,0]
orientationfixed: true, // Keep orientation angle the same as center[2]
geopos: null, // optional initial geographic position [lat,lon] in degrees,
// overrides center
follow: "zenith", // on which coordinates to center the map, default: zenith, if location enabled,
// otherwise center
zoomlevel: null, // initial zoom level 0...zoomextend; 0|null = default, 1 = 100%, 0 < x <= zoomextend
zoomextend: 10, // maximum zoom level
adaptable: true, // Sizes are increased with higher zoom-levels
interactive: true, // Enable zooming and rotation with mousewheel and dragging
form: true, // Display form for interactive settings. Needs a div with
// id="celestial-form", created automatically if not present
location: false, // Display location settings. Deprecated, use formFields below
formFields: {"location": true, // Set visiblity for each group of fields with the respective id
"general": true,
"stars": true,
"dsos": true,
"constellations": true,
"lines": true,
"other": true,
"download": false},
advanced: true, // Display fewer form fields if false
daterange: [], // Calender date range; null: displaydate-+10; [n<100]: displaydate-+n; [yr]: yr-+10;
// [yr, n<100]: [yr-n, yr+n]; [yr0, yr1]
controls: true, // Display zoom controls
lang: "", // Global language override for names, any name setting that has the chosen language available
// Default: desig or empty string for designations, other languages as used anywhere else
culture: "", // Source of constellations and star names, default "iau", other: "cn" Traditional Chinese
container: "map", // ID of parent element, e.g. div, null = html-body
datapath: "data/", // Path/URL to data files, empty = subfolder 'data'
stars: {
show: true, // Show stars
limit: 6, // Show only stars brighter than limit magnitude
colors: true, // Show stars in spectral colors, if not use default color
style: { fill: "#ffffff", opacity: 1 }, // Default style for stars
designation: true, // Show star names (Bayer, Flamsteed, Variable star, Gliese or designation,
// i.e. whichever of the previous applies first); may vary with culture setting
designationType: "desig", // Which kind of name is displayed as designation (fieldname in starnames.json)
designationStyle: { fill: "#ddddbb", font: "11px 'Palatino Linotype', Georgia, Times, 'Times Roman', serif", align: "left", baseline: "top" },
designationLimit: 2.5, // Show only names for stars brighter than nameLimit
propername: false, // Show proper name (if present)
propernameType: "name", // Languge for proper name, default IAU name; may vary with culture setting
// (see list below of languages codes available for stars)
propernameStyle: { fill: "#ddddbb", font: "13px 'Palatino Linotype', Georgia, Times, 'Times Roman', serif", align: "right", baseline: "bottom" },
propernameLimit: 1.5, // Show proper names for stars brighter than propernameLimit
size: 7, // Maximum size (radius) of star circle in pixels
exponent: -0.28, // Scale exponent for star size, larger = more linear
data: 'stars.6.json' // Data source for stellar data,
// number indicates limit magnitude
},
dsos: {
show: true, // Show Deep Space Objects
limit: 6, // Show only DSOs brighter than limit magnitude
colors: true, // // Show DSOs in symbol colors if true, use style setting below if false
style: { fill: "#cccccc", stroke: "#cccccc", width: 2, opacity: 1 }, // Default style for dsos
names: true, // Show DSO names
namesType: "name", // Type of DSO ('desig' or language) name shown
// (see list below for languages codes available for dsos)
nameStyle: { fill: "#cccccc", font: "11px Helvetica, Arial, serif",
align: "left", baseline: "top" }, // Style for DSO names
nameLimit: 6, // Show only names for DSOs brighter than namelimit
size: null, // Optional seperate scale size for DSOs, null = stars.size
exponent: 1.4, // Scale exponent for DSO size, larger = more non-linear
data: 'dsos.bright.json', // Data source for DSOs,
// opt. number indicates limit magnitude
symbols: { //DSO symbol styles, 'stroke'-parameter present = outline
gg: {shape: "circle", fill: "#ff0000"}, // Galaxy cluster
g: {shape: "ellipse", fill: "#ff0000"}, // Generic galaxy
s: {shape: "ellipse", fill: "#ff0000"}, // Spiral galaxy
s0: {shape: "ellipse", fill: "#ff0000"}, // Lenticular galaxy
sd: {shape: "ellipse", fill: "#ff0000"}, // Dwarf galaxy
e: {shape: "ellipse", fill: "#ff0000"}, // Elliptical galaxy
i: {shape: "ellipse", fill: "#ff0000"}, // Irregular galaxy
oc: {shape: "circle", fill: "#ffcc00",
stroke: "#ffcc00", width: 1.5}, // Open cluster
gc: {shape: "circle", fill: "#ff9900"}, // Globular cluster
en: {shape: "square", fill: "#ff00cc"}, // Emission nebula
bn: {shape: "square", fill: "#ff00cc",
stroke: "#ff00cc", width: 2}, // Generic bright nebula
sfr:{shape: "square", fill: "#cc00ff",
stroke: "#cc00ff", width: 2}, // Star forming region
rn: {shape: "square", fill: "#00ooff"}, // Reflection nebula
pn: {shape: "diamond", fill: "#00cccc"}, // Planetary nebula
snr:{shape: "diamond", fill: "#ff00cc"}, // Supernova remnant
dn: {shape: "square", fill: "#999999",
stroke: "#999999", width: 2}, // Dark nebula grey
pos:{shape: "marker", fill: "#cccccc",
stroke: "#cccccc", width: 1.5} // Generic marker
}
},
planets: { //Show planet locations, if date-time is set
show: false,
// List of all objects to show
which: ["sol", "mer", "ven", "ter", "lun", "mar", "jup", "sat", "ura", "nep"],
// Font styles for planetary symbols
symbols: { // Character and color for each symbol in 'which' above (simple circle: \u25cf), optional size override for Sun & Moon
"sol": {symbol: "\u2609", letter:"Su", fill: "#ffff00", size:""},
"mer": {symbol: "\u263f", letter:"Me", fill: "#cccccc"},
"ven": {symbol: "\u2640", letter:"V", fill: "#eeeecc"},
"ter": {symbol: "\u2295", letter:"T", fill: "#00ccff"},
"lun": {symbol: "\u25cf", letter:"L", fill: "#ffffff", size:""}, // overridden by generated crecent, except letter & size
"mar": {symbol: "\u2642", letter:"Ma", fill: "#ff6600"},
"cer": {symbol: "\u26b3", letter:"C", fill: "#cccccc"},
"ves": {symbol: "\u26b6", letter:"Ma", fill: "#cccccc"},
"jup": {symbol: "\u2643", letter:"J", fill: "#ffaa33"},
"sat": {symbol: "\u2644", letter:"Sa", fill: "#ffdd66"},
"ura": {symbol: "\u2645", letter:"U", fill: "#66ccff"},
"nep": {symbol: "\u2646", letter:"N", fill: "#6666ff"},
"plu": {symbol: "\u2647", letter:"P", fill: "#aaaaaa"},
"eri": {symbol: "\u26aa", letter:"E", fill: "#eeeeee"}
},
symbolStyle: { fill: "#00ccff", font: "bold 17px 'Lucida Sans Unicode', Consolas, sans-serif",
align: "center", baseline: "middle" },
symbolType: "symbol", // Type of planet symbol: 'symbol' graphic planet sign, 'disk' filled circle scaled by magnitude
// 'letter': 1 or 2 letters S Me V L Ma J S U N
names: false, // Show name in nameType language next to symbol
nameStyle: { fill: "#00ccff", font: "14px 'Lucida Sans Unicode', Consolas, sans-serif", align: "right", baseline: "top" },
namesType: "desig" // Language of planet name (see list below of language codes available for planets),
// or desig = 3-letter designation
},
constellations: {
names: true, // Show constellation names
namesType: "iau", // Type of name Latin (iau, default), 3 letter designation (desig) or other language (see list below)
nameStyle: { fill:"#cccc99", align: "center", baseline: "middle",
font: ["14px Helvetica, Arial, sans-serif", // Style for constellations
"12px Helvetica, Arial, sans-serif", // Different fonts for diff.
"11px Helvetica, Arial, sans-serif"]},// ranked constellations
lines: true, // Show constellation lines, style below
lineStyle: { stroke: "#cccccc", width: 1, opacity: 0.6 },
bounds: false, // Show constellation boundaries, style below
boundStyle: { stroke: "#cccc00", width: 0.5, opacity: 0.8, dash: [2, 4] }
},
mw: {
show: true, // Show Milky Way as filled multi-polygon outlines
style: { fill: "#ffffff", opacity: 0.15 } // Style for MW layers
},
lines: { // Display & styles for graticule & some planes
graticule: { show: true, stroke: "#cccccc", width: 0.6, opacity: 0.8,
// grid values: "outline", "center", or [lat,...] specific position
lon: {pos: [""], fill: "#eee", font: "10px Helvetica, Arial, sans-serif"},
// grid values: "outline", "center", or [lon,...] specific position
lat: {pos: [""], fill: "#eee", font: "10px Helvetica, Arial, sans-serif"}},
equatorial: { show: true, stroke: "#aaaaaa", width: 1.3, opacity: 0.7 },
ecliptic: { show: true, stroke: "#66cc66", width: 1.3, opacity: 0.7 },
galactic: { show: false, stroke: "#cc6666", width: 1.3, opacity: 0.7 },
supergalactic: { show: false, stroke: "#cc66cc", width: 1.3, opacity: 0.7 }
},
background: { // Background style
fill: "#000000", // Area fill
opacity: 1,
stroke: "#000000", // Outline
width: 1.5
},
horizon: { //Show horizon marker, if location is set and map projection is all-sky
show: false,
stroke: "#cccccc", // Line
width: 1.0,
fill: "#000000", // Area below horizon
opacity: 0.5
},
daylight: { //Show day sky as a gradient, if location is set and map projection is hemispheric
show: false
}
};

// Display map with the configuration above or any subset thereof
Celestial.display(config);
`

__Supported projections:__ Airy, Aitoff, Armadillo, August, Azimuthal Equal Area, Azimuthal Equidistant, Baker, Berghaus, Boggs, Bonne, Bromley, Cassini, Collignon, Craig, Craster, Cylindrical Equal Area, Cylindrical Stereographic, Eckert 1, Eckert 2, Eckert 3, Eckert 4, Eckert 5, Eckert 6, Eisenlohr, Equirectangular, Fahey, Foucaut, Ginzburg 4, Ginzburg 5, Ginzburg 6, Ginzburg 8, Ginzburg 9, Hammer, Hatano, HEALPix, Hill, Homolosine, Kavrayskiy 7, Lagrange, l'Arrivee, Laskowski, Loximuthal, Mercator, Miller, Mollweide, Flat Polar Parabolic, Flat Polar Quartic, Flat Polar Sinusoidal, Natural Earth, Nell Hammer, Orthographic, Patterson, Polyconic, Rectangular Polyconic, Robinson, Sinusoidal, Stereographic, Times, 2 Point Equidistant, van der Grinten, van der Grinten 2, van der Grinten 3, van der Grinten 4, Wagner 4, Wagner 6, Wagner 7, Wiechel and Winkel Tripel. Most of these need the extension d3.geo.projections

__Supported languages for constellation, star and planet name display:__ (name) Official IAU name, (desig) 3-Letter-Designation, (la) Latin, (en) English, (ar) Arabic, (zh) Chinese, (cz) Czech, (ee) Estonian, (fi) Finnish, (fr) French, (de) German, (el) Greek, (he) Hebrew, (it) Italian, (ja) Japanese, (ko) Korean, (hi) Hindi, (fa) Persian, (ru) Russian, (es) Spanish, (tr) Turkish


__Style settings__
fill: fill color (css color value)
opacity: opacity (number 0..1)
_Line styles_
stroke: outline color (css color value)
width: line width in pixels (number 0..)
dash: line dash ([line length, gap length])
_Text styles_
font: well, the font (css font property)
align: horizontal align (left|center|right|start|end)
baseline: vertical align (alphabetic|top|hanging|middle|ideographic|bottom)
_Symbol style_
shape: symbol shape (circle|square|diamond|ellipse|marker or whatever else is defined in canvas.js)
symbol: unicode charcter to represent solar system object.

$3

__Exposed functions & objects__
* Celestial.metrics()
Return object literal with current map dimensions in pixels
{width, height, margin, scale}

$3

__Exposed functions & objects__
* Celestial.add({file:string, type:json|raw, callback:function, redraw:function, save: function)
Add data in json-format (json) or directly (raw) to the display
The redraw function is added to the internal call stack of the main display routine
_file_: complete url/path to json data file (type:json)
_type_: type of data being added
_callback_: callback function to call when json is loaded (json)
or to directly add elements to the path (raw)
_redraw_: for interactive display, callback when view changes (optional)
_save_: for display svg-style, callback when saving as svg (optional)

* Celestial.clear()
Deletes all previously added functions from the display call stack

* Celestial.getData(geojson, transform)
Function to convert geojson coordinates to transformation
(equatorial, ecliptic, galactic, supergalactic)
Returns geojson-object with transformed coordinates

* Celestial.getPoint(coordinates, transform)
Function to convert a single coordinate to transformation
(equatorial, ecliptic, galactic, supergalactic)
Returns transformed coordinates

* Celestial.getPlanet(id, date)
Function to get solar system object specified with id
(available ids in config.planets.which array)
Returns planet object with coordinates at specified date

* Celestial.container
The object to add data to in the callback. See D3.js documentation

* Celestial.context
The HTML5-canvas context object to draw on in the callback. Also see D3.js documentation

* Celestial.map
The d3.geo.path object to apply projection to data. Also see D3.js documentation

* Celestial.mapProjection
The projection object for access to its properties and functions. Also D3.js documentation

* Celestial.clip(coordinates)
Function to check if the object is visible, and set its visiblility
_coordinates_: object coordinates in radians, normally supplied by D3 as geometry.coordinates array

* Celestial.setStyle(