d3-celestial
d3-celestial copied to clipboard
Create sky view with horizon
Can anyone tell me what parameters to use with d3-celestial to create the following effect:
![Screen Shot 2020-12-21 at 11 53 54](https://user-images.githubusercontent.com/7202168/102741057-e82d6d00-4383-11eb-9e05-59e31710c1fc.png)
So it would be a view of the sky as seen from a particular point on earth and looking into a certain direction. Also the directions (N, E, S, W) would be shown. I would also like to have a specific object in space (e.g. Sagittarius A*) marked so that when I change the time, I can create an animation that shows the movement of that object during a day.
What I have so far:
Config:
var config = {
location: [9.728769, 99.985367],
follow: 'center',
projection: 'hammer',
form: false,
center: [0, -90, 0],
interactive: false,
zoomlevel: 1,
background: {fill: '#fff', stroke: '#000', opacity: 1, width: 1},
datapath: 'https://ofrohn.github.io/data/',
stars: {
show: false,
},
dsos: {show: false},
mw: {
style: {fill: '#996', opacity: 0.1}
},
constellations: {
names: false, // Show constellation names
},
horizon: { //Show horizon marker, if location is set and map projection is all-sky
show: true,
stroke: '#cccccc',
width: 1.0,
fill: '#000000',
opacity: 0.9
},
lines: { // Display & styles for graticule & some planes
graticule: {
show: false,
// grid values: "outline", "center", or [lat,...] specific position
lon: {pos: [40, 0], fill: '#ff0e0e', font: '10px \'Lucida Sans Unicode\', Helvetica, Arial, sans-serif'},
// grid values: "outline", "center", or [lon,...] specific position
lat: {pos: [''], fill: '#eee', font: '10px Helvetica, Arial, sans-serif'}
},
equatorial: {show: false, stroke: '#aaaaaa', width: 1.3, opacity: 0.7},
ecliptic: {show: false, 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}
},
}
And this for changing the time:
let dateTime = new Date(2020, 11, 20, 14, 12)
let hourCounter = 0
function incHourFunction () {
hourCounter++
dateTime.setHours(dateTime.getHours() + 1)
Celestial.date(dateTime)
Celestial.rotate({center: [hourCounter * 15, -90, 0]})
if (hourCounter === 24) {
hourCounter = 0
}
}
setInterval(incHourFunction, 1000)
This gives me this initial image.
But when the animation starts, I get this. How can I keep the horizon straight? And how can I have the directions (N, E, S, W) displayed?
So far celestial isn't really equipped to keep the horizon straight. I think implementation of horizontal coordinates will fix that. That will take some time...