Data Stars



With this exercise I discovered different databases and various ways to incorporate data into a visual conceptualization. Originally working with wolfram I used the incoming string of data and manipulated the type being received as answers. I was curious about other databases and came across the HYG database. It holds background information on the data of stars such as spectrum,brightness,position and distance. What is particularly interesting is HYG utilizes parsecs and gives you the distance from the earth of all the stars even ones we can’t see with the naked eyes. I thought it would be interesting to portray the visual magnitude of many of the stars we can’t see and turn it into a data visualization. Using P5.js to receive the incoming data I mapped the catalogue of stars onto a P5.js sketch.



  if (readDelay) {

           setTimeout(() => {


           }, readDelay);


       else {




I utilized the above code to control the incoming data.  During the first stages of testing I found that the data came in very slowly at 42kb. Basically to get the data to stream in effectively I decided to just download the data once and received 121 data points to work with initially.

Now that I figured out how to control the data I had to convert that information into the stars I wanted to conceptualize. I accomplished this by converting the variable line to star  line.split; this inputs each entry individually in an array of entries and all the values between the commas are put in an array.

When trying to figure out how to use the data I incorporated the ID at index 0 and tried to parse it into a number then saved it into the star object. I did this for id, distance and magnitude. Reading the raw data in the console it was difficult to discern which increments meant what so I went look up more documentation. For example the position of the star is actually 3 values but originally ended up coding ony 1 designation for it.

At this point I wanted to see if I could distinguish the names of the stars from the abbreviations in the index. My initial idea was to attach the scientific names typed out to other characteristics listed in the index. To see if I could do this I decided to try and find the sun specifically in the data set so I had a comparison. That proposed a really good question, with all this data how do I plan to sift through it? I figured since it is a data set of all the known stars I should be able to find the sun specifically.  To sift through the information I was looking for took out the read delay. This kept initiating errors ( uncaught in promise type error cannot read undefined). Next I turned to searching the documentation from the HYG Database then went to astronomy stack exchange. Other people were having the same issue with no solution in sight but to use other databases that are better for basic naming conventions. I put that aspect aside for a possible future iteration.


Using a four loop initiating the star variable I used the values x,y,z.  I needed the simplest way of dealing with positions and discovered the best way to do that is just to map it onto 1 plane. You can then decide which plane to coordinate to; using x.z for example, I used the x,z coordinates of the star and mapped it right into a sketch.js file.

The star database seemed to have a lot of errors I was getting all kinds of zeros that I didn’t want to display. The next issue was that the data might exceed the canvas. My solution was to get a maximum number for all the values that I could find.  Applying information from Lodash for all the data points that I have, I then created 1 object that tracked what the biggest and smallest numbers are. This gave me a better idea of how to map all the different stars onto the canvas. At first, while trying to discern if I have an x value of -1000 how do I display it within the range of the canvas. I then realized If the smallest value of a star is -1000 then that should map back to 0.

I was able to accomplish this by initiating in the code (If stars.length already exceeds 1000 then stop). I then looked up star spectral types and then went to the HYG data base page to look up what the spectral numbers are so that I could map the spectral values of a star to RGB colours. Used this information to  create a variable for spectral colours and a variable for spectral colour names.


I learned a lot about more advanced debugging in this exercise. Would not have been able to make this project work without the forums where people were able to form solutions with the same issues I was experiencing. When utilizing databases they are not perfect entities and it is imperative to recalibrate. Mapping in this exercise produced varied results at first it was hard to wrap my head around having values that are meant to be 3 dimensional and how to place that data in a 2 dimensional space. Discovering Orthographic projection (sometimes orthogonal projection) is a means of representing three dimensional objects in two dimensional space.  Utilizing this process is what helped me create this code effectively and was a valuable learning experience. I would like to iterate on this project at a later date and discover new ways to display this particular data set; expanding on the graphics I created and adding other elements like sound.



Leave a Reply