“Let There Be Scatter Chart”

The enhancement for the Official J’s Map for the Galaxy Companion

In responding to some random people’s request of extending the functionality of the original Official J’s Map for the Galaxy Companion, we add a new widget of a graph displaying all exoplanets in our map with two user-specified properties for axis. This extension actually make this map more usable by providing an easy way to compare all exoplanets and checking its data. However, it also make the whole program looks way less cool fascinating. I mean, if the app is cool, who cares about what those dumb users have in mind.


System Running in CAVE

Project Overview


The graph would be just a scatter chart showing all exoplanets we have in our system, the picture above shows the system running with the graph. Note that small multiples are also there but you cannot see it from this picture. Guess it’s time for a wider lens.

  • Weird scatter chart orientation
    • You can see that the orientation of this graph is a little bit different from what you would see in normal situation. The origin is at the top-left corner and y direction points downward instead of upward. There’s really no big science in it. It’s just the default container coordinate system and I am way too lazy to do a rotation there.
  • Axis and tick and glyph
    • The graph has two axis, x and y. Each could be assigned to a user-specific data type of the exoplanet. The range of the axis is normalized to (0,max({exoplanets})).
    • To solve the vast data range, we used a logarithm.
    • On the graph, there are label and five ticks telling the effective parameter and its display range used for each axis.
    • We have total 5 types of glyph for exoplanets with different discovery methods.
      • Telescope stands for ‘Imaging’
      • Radar stands for ‘Radio Velocity’
      • Eclipse stands for ‘Transit’
      • Wave stands for ‘Timing’
      • Daemon eye stands for Solar system planets
  • The coordinates of each planet
    • The position of each planet is consistent to its real parameters for the given info category ( like ‘mass’ ) and the ticks on the axis. There are two interestingpair of attributes that I want to mention as an example.

      • Identical attribute for both axis.
All exoplanets would be in a line. Since all of them shares an identical slope of ratio of radius/radius = 1


    • Arbitrary attribute vs ‘distance to Sun
Each column would be the list of all exoplanets within a certain stellar system. Since they share the same distance to Sun which is the distance between our Sun to their star.


  • Small multiples highlight
    • This is not part of the graph. But I also add a highlight function for small multiples on the Wall. To synchronize the highlight in the graph and on the small multiples. It gives the user a nice connection between those two widgets. The picture below shows the highlight of small multiple. You can see there is a red border for the highlighted small multiples.



  • Laser pointer and Wand
    • The interaction with the graph would still be using the wii remote. Once the remote is pointing to the graph, we place a red dot as an indicator for the user. When the wand goes away, the indicator gets removed.
  • Zooming and panning
    • The picture below shows the zooming and panning. You can notice after the zooming in, the glyph remains at the same size while the data get way much more sparse. In this case, it would be easier for the user to track each exoplanet.
    • The axis ticks updates as the user zooming or panning. It has a scientific notation of x.xxE+xx which would make sense for me to read. This updates make it easier for user to read attributes from the axis ticks.


    • Recaps about the zooming and panning:
      • Initially, all coordinates are turning into logarithm and normalized by formula normalized_x = log(1+x)/log(1+max)and generated the original graph.
      • It works as if there’s a sampling window like the one in the graph. You’re using panning to move it around and scaling to adjust its size. Then all the content inside this sampling window would be remapped to the whole content of the graph.
      • Panning and Scaling would affect each other in some cases.
        • When scaling, the center of the sampling window remains unchanged, until the corner of the sample window reached the boundary of the original graph.
        • Whenever the sampling window tends to reach some where outside the original graph, we change the panning to constrain it inside. This basically means:
          • You can always scaling. However, the sample window might be shifting when reaching the boundary.
          • You cannot panning to the same direction after reaching the boundary.


  • Changing axis attribute
    • User could pick a certain attribute for each axis in the menu system very easily. We have 6 total possible attributes which are: period, semimajoraxis, eccentricity, mass, radius, distance. One thing to note is, I also displays the units we used for each attribute inside the label, as distance[AU]. It’s not the case in the screenshots I have, cause it’s just a debug screenshot from my PC.
  • Hover over and highlight
    • Whenever the user hover over a glyph in the picture, the glyph would pop out and enlarged to tell the user that it has been pointed at.
    • If there is a stellar system displaying in CAVE right now. The glyph of all exoplanets within that stellar would be highlighted too ( PS1. So is the small multiple of that stellar system ) ( PS2. I don’t feel like to work on the highlight icon, so I’m just using a different set of icon as the highlighted icon… It’s OK )
    • The hover over and highlight action are independent to each other, which means the highlighted icon can still be hover over and pops out, vice versa.
  • Cursor panel
    • Once a glyph has been highlighted, there will also be a little panel appearing next to the glyph displaying detailed info about this exoplanet:
    • This panel is attached to one of the four corner of the glyph depending on the current position of it. The idea to have it dynamically located is trying not to block other contents on the Wall ( Such as the awesome system in CAVE and other fellow small multiples )
    • You can also see the hover over working here. The selected glyph pops out. See, Asians don’t lie!

Hover1 Hover2

System interaction

I tried not to change anything on the interaction from the previous project. Part of the reason is to maintain the consistency, other than that is I just don’t want to touch my spaghetti code any more. Anyway, I decided to add two more sub menu in the menu system to change the axis attribute.

For the zooming, panning and picking system in graph. I used a flag to make it work with the previous control. It is very straight forward. Once you have your wand pointing to the graph, all interaction is sent to the graph. And after you get out of it, you’re back to normal.

  • Control over Graph
    • Zooming and panning
      • Using the Up/Down to control the zoom in and out on y axis
      • Using the Left/Right to control the zoom in and out on x axis
      • Using the Joystick to pan around.
    • Pick system
      • Once you hover over a glyph on the graph, you can hit Pick button to bring its stellar system into the CAVE.
      • At the same time, the corresponding small multiple for this stellar system and all its exoplanets in the graph would be highlighted.


You can get the separate demo code for the glyph from GitHub. And the combined project from another repo