ofrohn / d3-celestial Goto Github PK

Hi,
first of all thank you so much for this library!

I saw that in the celestial-form you can set the GMT.
Same time of the day with a different GMT have different star positions.

Is it possible to set the GMT from code?

http://ofrohn.github.io/celestial-demo/viewer.html

Center: 0.8
h: -19.7

The entire canvas grays out. How can we remove all the gray and have it be just the milkyway?

cc @ofrohn

Hello there,

I'm wondering if there's some sort of a roadmap or list of TODOs/"would be nice to have" stuff. So that somebody like me could use it to suggest merge requests?

Hi,

I'm trying to add another data file by doing this:
Celestial.add({file:, type:"dsos", ...});

What format should the file be in? I tried the same format that the other data files are in (like stars.6.json)

And what should the callback do? I tried having the callback call Celestial.redraw so that it can update the map.

In both cases, the map is either not updated or I'm getting the error t.redraw() is not a function.
Some pointers/direction would be great!

Thanks

Hello,

I would like to use your library from NPM, but when i'm cmpiling with webpack.encore (because i'm working on symfony 4 project), i have this error :

Running webpack ...
 ERROR  Failed to compile with 1 errors                                                         14:50:55
This dependency was not found:
* d3 in ./assets/js/deepskymap.js

My script deepskymap.js is like this (it's a resume) :

import Celestial from 'd3-celestial';

export default function skymap()
{
  let config = {...};
  Celestial.add({...});
  Celestial.display(config);
}

And app.js :

import skymap from './deepskymap'
skymap();

Do i need to install/import d3 package NPM too ? Is something wrong ?
Thank you :)

Hi,
If I double click on the map I get this error in the console..

d3.min.js:2 Uncaught TypeError: Cannot read property '0' of undefined
    at Function.t.rotate (d3.min.js:2)
    at HTMLCanvasElement.<anonymous> (celestial.min.js:6)
    at HTMLCanvasElement.t (d3.min.js:1)
    at o (d3.min.js:3)
    at Object.u (d3.min.js:3)
    at Rn (d3.min.js:1)
    at Tn (d3.min.js:1)

If I look at Function.t.rotate..

                    if (r !== t) {
                        r.each("start.zoom", function() {
                            this.__chart__ && (y = this.__chart__),
                            p.rotate(y.r).scale(y.k),
                            l(e)
                        }).tween("zoom:zoom", function() {

The object 'y' has x, y & k properties but not r so d3.rotate gets fed an undefined and chokes.

Not sure if this is related to issue #10 or something with similar symptoms.

Hi there

I have an issue displaying the constellation proper names, some of this text spills out side of the spherical map area (I am using the projection orthographic).

Is there a way to either force all text on the left-hand-side to align to the right and then visa versa. OR to prevent the text from appearing if any part of it falls outside of specifically the circle area?

Good-day - How can I contact you

Dear community,

We're experiencing problems with D3-celestial on retina devices.
The map becomes really blurry.

We've read about solutions and that it is a html 5 canvas problem.
But we cannot seem to fix it. Did anyone else encounter this problem aswell, and how did you fix it?
We've tried the following articles:
https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina
https://stackoverflow.com/questions/24395076/canvas-generated-by-canvg-is-blurry-on-retina-screen
https://www.html5rocks.com/en/tutorials/canvas/hidpi/

Time issue:
We can't seem to set the time properly.
Whenever we set location = true in our config, Celestial.display(config) results in an error.
When we set location = false there is no error.

Any help is appreciated!

my apologies for leaving this as an issue, but i wasn't sure how else to get in touch with you. I noticed you use a BSD license, which frankly, i am unfamiliar with, and just wanted to make sure that it would be okay to use this for a senior design project i'm working on in college. We are going to be working with radio astronomy and this is perfect for our purposes, to be able to see what objects will be in the sky at a certain time. Please let me know, and thank you.

Hi,
this is probably an issue I only see because my React wrapper around d3-celestial has to pass through babel/webpack, with more strict proptypes checks.
I get this error when I load a map:

index.dev.js:3791 Uncaught TypeError: Cannot assign to read only property 'name' of function 'function kepler(date) {
          dates(date);

          if (id === "sol") {
            dat.x = 0;
          ...<omitted>... }'
    at Kepler (index.dev.js:3791)
    at getPlanets (index.dev.js:1436)
    at index.dev.js:499
    at Object.<anonymous> (index.dev.js:9022)
    at Object.t (index.dev.js:8472)
    at XMLHttpRequest.i (index.dev.js:8985)

It would seem caused by the overwriting of the name property with a function.

Applying the following patch mitigates the issue:

--- libs/celestial.js-orig	2018-11-30 13:20:47.632758430 +0000
+++ libs/celestial.js	2018-11-30 13:28:57.966220021 +0000
@@ -2625,6 +2625,10 @@
     return kepler;
   };
 
+  Object.defineProperty(kepler, 'name', {
+    writable: true,
+  });
+
   kepler.name = function(_) {
     if (!arguments.length) return name; 
     name = _;

However i believe a better fix would be to refactor this, and use a different name for the name function, for instance getName

Can't wait to use this! I'm trying to view the preview of the Wall Map: http://ofrohn.github.io/celestial-demo/wallmap.html

But don't see anything. Is this link dead? Trying to see if the resulting image can be downloaded as Vector image.

Thank you to anybody who can help me.

Hi!

I'm trying to add the ancient chinese constellations, but i've stuck, i've manage to add the near equator ones but near the pole i cannot determine the transformation. For example there is the boundary line of the Draco constellation, I cannot make the transformation with Corel Draw.
Can you help me, that what app you use for the drawing?

Thank you

I am using d3-celestial in an Angular 8 project. When page navigation occurs with Angular router, I get the following error in the console:

zone.js:202 Uncaught TypeError: Cannot read property 'classList' of null
    at Array.Co.classed (d3.min.js:3)
    at datetimepicker.isVisible (celestial.js:3906)
    at HTMLDocument.<anonymous> (celestial.js:2605)
    at HTMLDocument.__onmousedown (d3.min.js:1)
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:26246)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at ZoneTask.invokeTask [as invoke] (zone.js:513)
    at invokeTask (zone.js:1671)

This line seems to be throwing the error:

  this.isVisible = function () {
    return d3.select("#datepick").classed("active") === true;
  };

Is there a way to safely remove the map from DOM, which I can use before navigation occurs e.g. in OnDestroy hook?

please, is there a way of making the azimuthal equidistant projection display the whole sky instead of hemi?

Hi there, I was doing some experimenting around in the code and I was wondering how I build all the individual files into the celestial.js main file? I've been editing the main file to test but I want to actually change each individual file and rebuild. I couldn't find any npm tasks to do this, so I was wondering how you did it.

Thanks

What is Safari's problem when drawing the current sky by time and location?

context.fill in drawOutline seems to have no affect, and context.stroke seems to draw a broken circle:

http://storage5.static.itmages.com/i/18/0329/h_1522310479_5461621_65ecaba8c4.png

Tried with macOS Safari 10 and 11. On iPhone 8 it works all right though.

Hi There,
First off, this is just wonderful, I have your code running on a local web server, and have spent hours just looking at the night sky!
What I am really looking for is to export the image as something like an SVG (the idea is to feed this image into a laser cutter to make a physical map)
I have saved the image (it outputs a PNG) which unfortunately is not high enough resolution for what I am looking to do.
Even if you can just point me in a direction I would be thrilled. Again, this is a wonderful app, well done.
Nick

Well, im using my own datepicker, but when i pass the date with celestial.date() the map don't rotate. How can i make they rotate only with new date :(

Example:

Libra:
https://es.wikipedia.org/wiki/Libra_(constelación)
http://www.astroyciencia.com/2007/02/17/historia-de-la-constelacion-de-libra/

Hi,
I work for a small company which makes meteor and wind radars and one of the outputs of our radar is a histogram of meteor radiants. I was wondering if it was possible to overlay such a thing on a d3-celestial map?

The data are a 90x90 grid covering 360x180 degrees. Relatedly I am a bit confused about converting RA in hours to degrees. The sources section of the README says "All data converted to GeoJSON at J2000 epoch, positions converted from 0...24h right ascension to -180...180 degrees longitude as per GeoJSON requirements, 0...12h -> 0...180º; 12...24h -> -180...0º" but that seems odd so I wanted to check if it was right first. (I'm no astronomer, amateur or otherwise).

Thanks, any help much appreciated.

Dear community,

Filling the background works for us in every browser.
In safari the background just stays transparent.
We tried it with RGB and HEX, in both cases the background stays transparent.

I attached 2 screenshots to display what's happening.
In one screenshot you see a pink background, and the stars are visible.
In the other screenshot the background, is white but it should be pink. The outline fill of the map does change to pink.

I also attached two screenshots made in chrome so you can see that other browsers don't have this behaviour.

Safari:

Chrome:

When the coordinate system is changed, the Milky Way color seems to invert. Apparently that's not really what happens, but that's the effect. The behavior is the same in Chrome, Firefox and Edge.

To replicate this issue, just go to the interactive demo on GitHub, and change the coordinate system to ecliptic. Change back to equatorial and the MW remains white. Changing the MW parameters (color and opacity) points to the background color not being painted in the MW region.

Hi ofrohn,

the following error will freeze the celestial map so I can't rotate the map anymore. I am trying to figure out when it happens..it seems to happen when I am using the mouse wheel to zoom in/out and, at the same time, the mouse pointer exits from the region's map.

celestial.js:880 Uncaught TypeError: Cannot read property '0' of undefined
at Function.forward.invert (celestial.js:880)
at Function.Ct.n.invert.t.invert.e.invert (d3.min.js:1)
at Function.e [as invert] (d3.min.js:2)
at position (celestial.js:2551)
at HTMLCanvasElement. (celestial.js:2437)
at HTMLCanvasElement.t (d3.min.js:1)
at d3.min.js:1
at l (d3.min.js:3)
at HTMLCanvasElement.p (d3.min.js:3)
at HTMLCanvasElement.__onwheel.zoom (d3.min.js:1)
forward.invert @ celestial.js:841
Ct.n.invert.t.invert.e.invert @ d3.min.js:1
e @ d3.min.js:2
position @ celestial.js:3738
(anonymous) @ celestial.js:3631
t @ d3.min.js:1
(anonymous) @ d3.min.js:1
l @ d3.min.js:3
p @ d3.min.js:3
(anonymous) @ d3.min.js:1

This is another error that happens when the mouse pointer exits from the map's region while I am rotating the map (i.e. while I am holding down the left mouse button). By the way, it doesn't make the celestial map crash.
Uncaught TypeError: Cannot read property '0' of undefined
at Function.forward.invert (celestial.js:880)
at Function.Ct.n.invert.t.invert.e.invert (d3.min.js:1)
at Function.e [as invert] (d3.min.js:2)
at position (celestial.js:2551)
at HTMLCanvasElement. (celestial.js:2449)
at HTMLCanvasElement.t (d3.min.js:1)
at d3.min.js:1
at c (d3.min.js:3)
at n (d3.min.js:3)
at d3.min.js:1
forward.invert @ celestial.js:841
Ct.n.invert.t.invert.e.invert @ d3.min.js:1
e @ d3.min.js:2
position @ celestial.js:3738
(anonymous) @ celestial.js:3637
t @ d3.min.js:1
(anonymous) @ d3.min.js:1
c @ d3.min.js:3
n @ d3.min.js:3
(anonymous) @ d3.min.js:1

Any help will be great. Thank you in advance.

Hi
Thanks for resources.
Can you please tell me how to rotate map.
I am trying to redraw map with different parameter values but not working.
Celestial.redraw({transform:equatorial|ecliptic|galactic|supergalactic}) Not Working

Can you please help me.

Hello, thank you for d3-celestial… It’s awesome!!!

I am trying to add new points to the map. My purpose is to show the antisolar point (Earth Shadow) and the geo belt. I am following the instructions that you left in the readme but I am having some troubles. I suppose that it is my failure but I do not understand why.
To add both figures, I am writing them in the GeoJSON. The code of the antisolar point in the geoJson is:

{"type": "Feature",
   "id": "GC",
   "properties": {
     "name": "",
     "desig": "PN",
     "type": "antisolarshadowpoint",
     "mag": 3,
     "dim": "60"
   },
   "geometry": {
     "type": "Point",
     "coordinates": [123.60469651,19.8523322646]
  }},

So, I modified the config.js and I inserted the object antisolarshadowpoint:

antisolarshadowpoint: {shape: "bigCircle", fill: "#ffcccc", opacity: 0.5},

And I also modified canvas.js and I defined bigCircle as:

"bigCircle": function(ctx) { //created to add shadow to a point
var s = Math.sqrt(size()), 
      r = s*4; 
      ctx.arc(pos[0], pos[1], r, 0, 2 * Math.PI);
      return r;
  },

At the end, I can draw the circle representing the antisolar point, but it doesn’t resize when I do zoom in or zoom out. For the geobelt is the same.

I have two questions:

1- Can I draw the antisolar point and the geo belt in other way (cleaner than I did) or I am using the correct one?

2- How can I do to resize the objects with the zoom in/out?

Many thanks for your help!!!

I would like to add a nightsky view into my application where the user can see the nightsky of his current location in the app. I was wondering how I could receive only the canvas coordinates of the stars without rendering the map. Is this possible?

Hi how can i add a Button to save the image to database, instaed of right click and save, and i didnt understand how Change the years more than 10 years from the year we are

Hi,
I find the project quite interesting, and I'd like to integrate it with my astrophotography application: https://github.com/GuLinux/StarQuew .
However I can't seem to be able to import the library, not with ES6 import, nor with require, apparently celestial.js doesn't export anything.
Looking at the source, I found a declaration I'm not familiar with (starting with a !, then assigning this.Celestial = this, although I'm not sure what the this object should be in this case).

Could you make the js a bit more "import friendly"?
Thanks,
Marco

Hi Olaf - great service firstly.

I am trying to add the form with the map (either form or location). I have tried to change these to true (rather than false) in the config variable I pass but I get an error. Am I missing something? Do I need to do something else?

Any help will be great. Primarily I just want to mainly use location like this demo of yours:

http://ofrohn.github.io/celestial-demo/location.html

Thanks
Paresh

Hi,
I want to have geopos set to produce a horizon, but want the (initial) center to be something else.

I tried working around it by calling Celestial.rotate after drawing but it then starts there but straight after it moves the center to geopos.

Is it possible to add RA labels around an "airy" projection, for example 1h, 2h, etc ?

Or is there a way to do this now.

Hi,
the style for canvas defined in celestial.css

canvas { display: inline-block; position:absolute; z-index:0; cursor:hand; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; }
canvas:active { cursor:move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }

affects every canvas element in the web page, in particular it ovverrides the canvas properties of another js library I am using.

I think that a possibile fix could be adding a canvas-class to the canvas selector in order to apply that style only to canvas elements of that class. Something like:
canvas.canvas-class { display: inline-block; position:absolute; z-index:0; cursor:hand; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; }

Thank you!

Hi - another question. I am overlaying a comet track on the map. I have a function that is triggered when I want to plot another track. New data is passed to it. Thus remove the previous track and plot the new one. However, as you can see here:

http://astro.ukho.gov.uk/cometEphemeris/comets.cgi

and using the line:

Celestial.container.selectAll(".ast.").remove();

(see view page source for code) if you choose another comet and then click create cometary ephemeris it retains the marker overlay. I have tried to add my markers in the each section:

Celestial.container.selectAll(".ast").each(function(trackData) {...

But this does not work either. The code is messy as I am trying to sort this problem. Any thoughts?

Thanks
Paresh

i am trying to make sky map generator on my WordPress site like this http://mapstar.space/constructor
how i can do that can you help me with that i can pay for this
i want make site like this
skyp:[email protected]

Hello,
Is there a way to make the time range of the projections beyond 10 years from current year? Does it have to be backed by a specific database?

Thank you!

Would it be possible to add a (non-json based) example of using Celestial.add to the documentation? For example, a white polygon on top of the map.html example?

Hello,

I have been trying to debug an interaction of features unsuccessfully for the past few days. It appears to only apply to hemispheric projections, as far as I have noticed. It is able to be demonstrated with the viewer:

https://ofrohn.github.io/celestial-demo/viewer.html

1. After page load, change the projection from 'Aitoff' to any projection with '(hemi)' in the title. The chart background should remain black.
2. Change the coordinate system from 'Equatorial' to any other. The chart will refresh with a white background, a little bit more zoomed in, and with a black vertical bar down the center.

I still don't have much visibility into the issue after trying to perform a trace through the code, but it seems that the styling is not being applied after a hemispheric re-projection / coordinate change. Perhaps there is some silent error and the subsequent code that would apply styling isn't running?

Is there something else to this case that I am not understanding?

I'm wondering if this can be pushed to NPM? Thanks!

I want to show star map inside my own svg, because I need a proper heart shape design and inside that a star map. But in this just Bonne projection which is not look like a heart. Is there any way to add a proper heart shape projection?

Hi there,

Any ideas on running server side D3-Celestial rendering using Node JS? Is it possible?

Hi,
I'd like to display the current equatorial coordinates of the mouse pointer so when a user is looking for features in data they can note down the position.

I couldn't see an existing function to do this but perhaps I am missing something that already exists in d3.

Any pointers much appreciated - thanks.

Readme document reads that the div with "celestial-form" id is optional but it appears not to be. I get uncaught exceptions in javascript if I don't include a div with this id regardless of the boolean values set in the config namely, 'form' and 'location'.

This is the console log error:

celestial.js:3591 Uncaught TypeError: Cannot read property 'value' of null
    at daySel (celestial.js:3591)
    at new datetimepicker (celestial.js:3585)
    at geo (celestial.js:2420)
    at Object.Celestial.display (celestial.js:106)
    at example.html:178

It would be nice to be able the desired zoom level (possibly in arcminutes) in order to allow visualizing a certain predefined area instead of the full map at startup.
Updating zoom through the config should also be allowed using the apply function.
Another related desired change would be to have the ZOOMEXTENT property configurable.

Cannot read property 'raw' of undefined

Line

raw = d3.geo[projection].raw;

Really like this star map!

Feature request: I'd like to be able to zoom in and pan around, all without changing the center of the map. The idea is to explore what's currently up in the night sky, so fixed center coordinates (over short timescales) is important for keeping the map accurate with a fixed observing location.

It would work perfectly fine if the projection didn't change while panning, as if the map were printed on paper and a camera moved closer to zoom and side-to-side to pan. In other words, I'm not too concerned with correcting edge distortion.

Does this sound doable?

I've zoomed in on a section of sky, and then panned to a particular view. How can I retrieve the central coordinates of the location I'm now viewing? The coordinate system I'm using is ecliptic -- do I need to do a transformation to the ecliptic coordinate system? I've spent significant time researching this, and haven't found a solution. (i.e. I'm not just being lazy. Stupid maybe, but not lazy.)

Hi!

I am making great progress learning this wonderful toolkit. I am able to create custom shapes following the asterism demo.

However, I would like to create a shape that stays fixed in place while the stars move independently. I am not sure how to do this with d3-celestial.

The idea is to have an indicator of horizon (like a planisphere window) maybe with some tree shapes or building shapes that mimic my local viewing area. Also, I would like to have a fixed measurement line overlaid in the sky.

Can you point me in the right direction? is there a demo code or a hidden "layers" function that would allow me to use the Lat, Lon coordinates, but keep them fixed as the stars and planets move?

Cheers!
Daniel

Thanks for this code! It's great. You give a nice example of how to add an asterism (summer triangle). I'd really like to superimpose a lot of point sources (supernovae). Could you give us an example of adding custom point sources (in-line JS)? Sorry - I'm new to d3.js, so having difficulty writing the relevant functions.

Hi
I am currently trying to implement https://github.com/d3/d3-geo-polygon as projections, but the process seems to be different than with the default d3-projections. Do you have any idea how i could achieve this? Will it change the whole part of executing the projection?

Chris