Creating an interactive “exoplanets in orbit” visualization with D3.js

Posted: December 24, 2014-Likes: 0-Comments: 3-Categories: D3.js, Data Visualization, Storytelling-Tags: D3.js, Interactive, Science
You are here: ...
Home / Blog / D3.js / Creating an interactive “exoplanets in orbit” visualization with D3.js

Having enjoyed the process of explaining a visualization through Storytelling in my previous post about Chord Diagrams, I wanted to create another and try a slightly different approach (and give myself a new project to learn more about D3.js and JavaScript in general)

For this, I downloaded data about almost 300 exoplanets from exoplanets.org. I was wondering how their orbits would look compared to one another. I found a lot of great examples of orbits in our own Solar system. But the planets in our Solar system are a bit boring compared to all those exoplanets out there (orbiting the star in just 24 hours, while being 20x bigger than the Earth!) and high eccentricity orbits are more fun than almost circular ones. I’m sure this is not the first visualization of more than 1 exoplanet on its orbit, but at least it is a bit more unique than visualizing our Solar System ;)

Storytelling, slightly different

The visual starts with all the data already present, all exoplanets are started from the same horizontal line. This goes against the idea of slowly introducing your data. But that was exactly the reason that I chose this dataset. I think that a lot of people have seen a planet in orbit visualization before. It is almost a sort of intuitive thing to see (although I might be wrong, having studied astronomy I admit I am very biased).
I thought that perhaps some datasets you can just throw out there, because it can be something that pulls an audience in. It doesn’t feel intimidating when you see it, you want to know more. So here I start with the end point, but because there are still interesting or unknown variables to explain (“eccentricity” or “au” anyone) I have an introduction button which starts a story that takes you through some interesting facts and explains more variables

And of course, trying to teach others more about our Universe is a great way to spend my time!

Things I wanted to implement/learn

I always find it to be easier to learn a programming language to set myself a goal, something to create. It gives me a drive and when it works in the end it gives a satisfaction that I’ve created something. During this small project I wanted to learn about a few things (although some came up when I had already started)

Moving objects (continuously)

Getting the exoplanets to move on a circular orbit was actually quite easy with the d3.timer function and a post on stackoverflow. However, planets do not usually orbit their stars on perfect circles, they move on elliptical orbits and even more so, their speed depends on the distance to their star (Kepler’s 2nd law which I refer to in the visual).
Being able to program directly in the browser in this example of an elliptical orbit saved me a lot of time. Getting just one planet to not move of the screen in a swoosh or wobble randomly, but move correctly took most of the time. A long time my issue was caused by using a D3.js transition to change location instead of a direct change of x and y coordinates.
When I finally had it working I found that I had put the star in the wrong focus of the ellipse, now planets were moving faster while far away from the star. Glad I caught that mistake before putting it online
For all planets to move at once, I had to so some preparation in R to, amongst others, create new variables to hold the x and y locations of each planet which are updated constantly by the d3.timer function
the exoplanets project

Gradients

How to create gradients in SVG elements. And especially, how to create a separate gradient per element. Here I used the effective temperature of the star around which the exoplanet orbits as the “middle” color and the d3.rgb.brighter() and d3.rgb.darker() for the edges. Using a radial gradient with the “bright spot” at one edge instead of in the middle of the planet/circle. Then continuously rotating the planet so the brightest section is always pointed towards the star.
Ah, yes, and also a rainbow gradient, found this option yet in the visual?

Dynamic locations

How to always put your elements on the same relative location, even when the screen is resized. Some info from another question on stackoverflow helped again. Just had to also include resizing the SVG containers width and height with the new x and y in the updateWindow function

Tooltip & Info pop-up

How to use divs as tooltips and info screens. Especially how to make the tooltip appear above the hovered over planet was a bit tricky, but almost by luck to then make it move along with the planet went rather quick by also using a d3.timer function on the tooltip x and y locations. Learned the difference between a zero opacity and hidden visibility in css :)
The design for the tooltip was based on the Obama budget proposal. I’d love to create something like that visualization one day

Other

And some smaller things, such as more about the use of CSS, placing images on SVG elements (I found the Sun here), creating an interactive legend, a different version of a progress bar during the Storytelling portion and some things I’ve probably already forgotten
One other thing I wanted to try was adding a zoom function because now you’re only seeing the exoplanets closest to their stars. However, I thought zooming moving objects was one bridge too far for now. I’ll first try and implement it in a static image
BTW: I’d suggest going to the source site to enjoy the exoplanet visualization on your entire screen (you’ll be able to see more planets)

As always I’d love to hear your thoughts (have I forgotten something) and ideas for improvements. Or if you want to know more details about a specific aspects

Prev / Next Post
Comments (3)
  • Andy Clark - December 25, 2014 - Reply

    Brilliant work. Couple of points
    It would be interesting to see distance from SS in light years and is there a way to pause the tooltips to make them easier to read?

  • helder velez - July 6, 2015 - Reply

    spectacular

Leave a Reply