I was inspired to create this dashboard by the amazing videos of NASA’s Perseverance Rover surviving the “Seven Minutes of Terror” during it’s landing on Mars. If you saw it, you probably noticed that the parachute had a rather strange pattern on it. It turns out that that was one of many easter eggs included in the mission. The parachute encoded the Jet Propulsion Lab’s motto “Dare Mighty Things” along with the coordinates of the Lab itself. “Super nerdy”, I thought. “Love it!”. Then after a little thinking, “I could build that in Tableau! And allow people to write their own message!”

I’ll save you from the many dead ends as I felt my way into the problem (this is plenty long enough as it is), but here is how I built my tiny tribute to NASA’s massive achievement. The links in the dashboard itself for links to further information.

You can find the dashboard on Tableau Public

Techniques used:
● Figma for overall design, layout and for design elements
● Scaffolding (specifically domain completion)
● Polygons created with trigonometry
● Transparent shapes

Massaging Data

The encoding is described in more detail on the dashboard as well as in the pages linked from it.

I needed to split up the parachute diagram somehow. The schema I came up with was:

• Rings. 0-3
• Positions (letters or numbers around each ring). 0-7
• Bit. Each letter or number was encoded into 10 bits. 0-9. Note that while all others count clockwise, this counts anti-clockwise as the most significant bit is written first.
• Segment. With eight positions and ten bits per segment, this gives 80 segments of 4.5°. 0-79

Whilst I could have created the whole lot out of thin air using domain completion, I decided to build my data scaffold in Excel to give me a structure of 10 bit for each of 8 letter positions for each of the four rings. The data in Excel looks like this:

To save myself some time, I used pivoting in Tableau to give me a basic data source that looks like this:

The name of the tab in Excel “Starting Letters” is a bit confusing now, one of several dead-ends!

I created string parameters for each of the words with starting values as per NASA’s original. These will provide the source of the data to be plugged into each position of the scaffold built above.

I also created a table in Excel for the main NASA sites, including their geographic locations and the position of each in the selection table (more on that later). I used the ring number to join this with the data above to give:

I could have created some elegant way of calculating all the latitude and longitude minutes and seconds from the decimal figures within Tableau, but decided it was a waste of time for this data set, so I just calculated them all in Excel. Note that I need both coordinate systems, decimal for the map, deg, min, sec for the encoding.

Calculations

I could now start putting together my calculations:

[Letter in position]
// CASE Statement needed as the outer ring needs a different calculation
CASE ([Ring (0-3)])
WHEN 0 THEN UPPER(LEFT(MID([p.Word 0],[Letter Position (0-7)]+1),1))
WHEN 1 THEN UPPER(LEFT(MID([p.Word 1],[Letter Position (0-7)]+1),1))
WHEN 2 THEN UPPER(LEFT(MID([p.Word 2],[Letter Position (0-7)]+1),1))
WHEN 3 THEN
/* The +64s are because 64 will be subtracted at the next
step (Letter in position, binary) */
CASE([Letter Position (0-7)])
WHEN 0 THEN CHAR([Lat Deg]+64)
WHEN 1 THEN CHAR([Lat Min]+64)
WHEN 2 THEN CHAR([Lat Sec]+64)
WHEN 3 THEN [Lat Letter1]
WHEN 4 THEN CHAR([Long Deg]+64)
WHEN 5 THEN CHAR([Long Min]+64)
WHEN 6 THEN CHAR([Long Sec]+64)
WHEN 7 THEN [Long Letter1]
END
END

This gives me a single character for each position, which will then be converted into ascii, then binary. Note that the letters are to be encoded as per their position in the alphabet, not their ascii values, so I need to shift certain calculations by 64, so a 1 for the letter A translates to 65 in ascii.

I then need to convert to ascii and generate binary codes for all letter positions in all rings:

[Letter in position, binary]

//If there is no content, then generate all 1s
IF ISNULL(ASCII([Letter in position])) THEN “1111111111”
ELSEIF
//In the first three rings, make sure that a valid letter is being used
([Ring (0-3)] < 3 AND (ASCII([Letter in position])>64 AND ASCII([Letter in position])<91))
OR
//In all other cases in rings 0-2 and in the outer ring, generate the binary
[Ring (0-3)]=3
THEN
str(int(((ASCII([Letter in position])-64)/2^9))%2)+
str(int(((ASCII([Letter in position])-64)/2^8))%2)+
str(int(((ASCII([Letter in position])-64)/2^7))%2)+
str(int(((ASCII([Letter in position])-64)/2^6))%2)+
str(int(((ASCII([Letter in position])-64)/2^5))%2)+
str(int(((ASCII([Letter in position])-64)/2^4))%2)+
str(int(((ASCII([Letter in position])-64)/2^3))%2)+
str(int(((ASCII([Letter in position])-64)/2^2))%2)+
str(int(((ASCII([Letter in position])-64)/2^1))%2)+
str(int(((ASCII([Letter in position])-64)/2^0))%2)
ELSE “1111111111”
END   

From this, I can now generate the 1s and 0s for each position:

[Bit value calc]

IF [Letter in position]= NULL THEN “1”
ELSE
MID([Letter in position, binary],10-[Bit in Byte Source],1)
END

A final calculation I need is to work out if the bit position is odd or even. This is needed as the section shapes in the parachute are different depending on the position:

[Segment even #?]

IF [Segment number (0-79)]/2 = INT([Segment number (0-79)]/2) THEN 1 ELSE -1 END

With all of these together, I can build them into a table to check that all the calculations are correct:

Turning numbers into pictures

Now I have the raw data, I need to create the shapes to build the parachute.

Each ring has a different shape and within each ring, the odd and even shapes are mirror images of each other. I worked out that I could create a good approximation of all the shapes I needed by creating five-sided polygons with six nodes to calculate (the last node being the same as the first to close the polygon).

You can see examples on each ring as well as the key radii in the picture below. The six radii were all parameters in order to make is easier for me to tweak them to get the shapes to fit the background photo of the parachute itself. There were also deltas needed at several points for the calculations. The nodes are also numbered in the diagram:

I needed a different calculation for each ring. The x and y calculations for each of the points for the third ring (with numbered nodes above) were:

[Ring 2 x for polygons]

//Key to getting this working is making sure that this AND ALL SUBORDINATE table calculations are along Binned Endpoints for path

IF [Polygon Path Index] = 0 THEN
([r3]+[delta2]([Segment even #? densified]))SIN(RADIANS([Segment Start Angle (densified)]))
ELSEIF [Polygon Path Index]= 1 THEN
[r4]SIN(RADIANS([Segment Start Angle (densified)])) ELSEIF [Polygon Path Index]= 2 THEN ([r4]+[delta3])SIN(RADIANS(([Segment Start Angle (densified)]+[Segment End Angle (densified)])/2))
ELSEIF [Polygon Path Index]= 3 THEN
([r4]SIN(RADIANS([Segment End Angle (densified)]))) ELSEIF [Polygon Path Index]= 4 THEN ([r3]–[delta2]([Segment even #? densified]))SIN(RADIANS([Segment End Angle (densified)])) ELSEIF [Polygon Path Index] = 5 THEN ([r3]+[delta2]([Segment even #? densified]))*SIN(RADIANS([Segment Start Angle (densified)]))
END

[Ring 2 y for polygons]

Same as for x, but with COS in all calculations instead of SIN!

[x]

IF [Ring number table calc, densified]=0 THEN
[Ring 0 x for polygons]
ELSEIF [Ring number table calc, densified]=1 THEN
[Ring 1 x for polygons]
ELSEIF [Ring number table calc, densified]=2 THEN
[Ring 2 x for polygons ]
ELSEIF [Ring number table calc, densified]=3 THEN
[Ring 3 x for polygons ]
END

The numbering of the nodes was achieved by Unioning the data source table with itself, binning and data densification. To save space here, please see “Getting data out of thin air” in my post Making waves with Fourier Series, Part 2, where I use exactly the same technique.

For further information about scaffolding and data densification in its various forms, see Creating a Date Scaffold in Tableau by Ken Flerlage and When and How to Scaffold Data by Jim Dehner, which you can see him present online on VizConnect‘ channel and see his example dashboard on Tableau Public.

The segment start and end angles were simply 4.5° (one 80th of a circle) times the number of segments around the circle, plus an alignment factor to make the whole thing align with the underlying photo. The end result in table form looks like this:

Plotting these points as polygons and using the binary calculations above for the colours (and checking that all table calculations are calculated correctly!) gives the first layer of our diagram:

Note that I fixed the axes to make it easier to tweak the different radii to fit the underlying picture of the original photo.

Talking in Circles

Placing the letters in the appropriate positions was simple compared to above!

[Letter ring text]

CASE [Ring (0-3)]
WHEN 0 THEN [Letter in position]
WHEN 1 THEN [Letter in position]
WHEN 2 THEN [Letter in position]
WHEN 3 THEN
IF [Letter Position (0-7)]=3
OR [Letter Position (0-7)]= 7
THEN CHAR([ASCII of letter in position])
ELSE STR([ASCII of letter in position])
END
END

[Letter Radius]

CASE [Ring (0-3)]
WHEN 0 THEN 3
WHEN 1 THEN 6
WHEN 2 THEN 8.8
WHEN 3 THEN 11.2
END

[x for letter ring]

ATTR([Letter Radius])*SIN(RADIANS([Segment Start Angle (densified)]+22.5))

The 22.5° adjustment at the end places the letter in the middle of the segment.

Next I needed the letter grid, which highlights the regions of the pattern which represented each letter. I could not think of an elegant way of doing this that didn’t involve painstakingly tracing lines with a mouse, so I dragged two calculations to colour to produce the picture below, which highlights the regions, copied a screen shot of it, pasted this into Inkscape, traced it to create an outline, then saved this as a bitmap. Not elegant, but it worked well enough. On reflection, maybe I could have done something clever with sets!

For the dashboard, each of these was placed in a floating container with a transparent background and a show/hide button (the eyes around the edge) to give:

Where am I?

Next I created a simple map of the NASA locations as well as a table to give users a way of selecting which location’s coordinates should be encoded into the outer ring.

There were only two calculations needed here, firstly a simple concatanation to be able to display the selected coordinates in the panel where the user enters data:

[Location Readout string]

STR([Lat Deg])+”° “+
STR([Lat Min])+”‘ “+
STR([Lat Sec])+”” “+
[Lat Letter1]+”, “+
STR([Long Deg])+”° “+
STR([Long Min])+”‘ “+
STR([Long Sec])+”” “+
[Long Letter1]+” “

Adding a couple of calculations to see if a site was selected or not enabled the selected site to be written in bold:

I created some dashboard actions so that the user could interact with either the list of sites or the map and the other would reflect highlights on mouse over and selections on clicking. Initially there was a rather ugly yellow highlighting on the list above as the user passed the mouse over locations on the map. Transparent shapes to the rescue! Note that the marks above are shapes. In this case transparent shapes. This got rid of the issue.

See this and excellent tips about using transparent shapes on 14 Use Cases for Transparent Shapes & Images by Kevin Flerlage and Six Uses for Transparent Shapes in Tableau by Luke Stanke.

Laying out with Figma

I’ve seen a number of Tableau stars going on about using Figma to design dashboard, but I never got it. It seemed to me that one created the dashboard in Figma only to make it again in Tableau. A bit pointless. I got myself a free account, downloaded the desktop version of Figma, went through Robert Crocker’s free into course on VizSimply and just jumped in. Initially with that feeling I had many years ago when I opened Excel for the first time and was greeted with a blank sheet.

I’m sure that there is much more that I’ll be able to do with the tool, but here are the main uses I found this time:

1. Pixel-precise layout is much, much easier in Figma than all the faffing around and adjusting with containers that you have with Tableau. Build and experiment with size and placement in Figma, then create it just once in Tableau. TONNES of time saved!

2. Creating graphical elements that exactly fit your needs. See examples below.

3. Precisely locating things on the dashboard. If you have a look at my dashboard, there are tooltips as you float your mouse over the various images of Perseverance during the landing procedure. All I did was plot a number of transparent shapes on a transparent sheet the same size as the whole dashboard and floated it near the bottom of the float stack on the dashboard. But how to find the locations? I simply placed a small object over each image in Figma and noted the location. Easy!

The last point helped me to build the spreadsheet for my second data source for the lander tooltips:

One design element I wanted was to have just some of the corners of the different boxes to be curved. With Figma, I can simple alt-select the corner tool on the corner of interest and drag to create the Radius. I can then simply export that one box (including with 80% transparency, which was handy), then float it onto the dashboard in Tableau. I exported all images at twice the size to minimize pixelation in the final dashboard.

The text you see was just as a placeholder to see how it would look. I didn’t want to paste in a bitmap for text, so I just floated a simple text box.

The colours I used for the main dashboard text boxes, background colours etc were taken from NASA’s image that I use as the background. The red and white (actually an off-white) used for the parachute diagram, frames and buttons were taken from the photo of the actual Perseverance parachute.

Popping!

The process was not quite so simple with pop-up containers. These are floating containers that can have buttons (text or image) to open and close them. The problem is that a container cannot have an image as a background. The best I could come up with was to create a floating container with sub-containers of just the right size and shape with edges of just the right thickness and place a graphical element (created in Figma!) in the corner container:

The result is not as clean as I would like, but it looks a bit better on Tableau Public as it does on Desktop.

Action!

The final step was adding actions to the dashboard.

Most of these were related to highlighting and selection in the list and map of the NASA sites. One important trick is to remove the highlight once something is clicked. There are a couple of techniques for this based on different kinds of dummy fields and I’d love to link you to where I first learnt it, but I can’t remember. Feel free to have a look at How to automatically deselect marks in Tableau by Luke Stanke and Default Highlighting by Brian Moore for more on the topic.

I added a reset button (using another transparent shape so as to avoid ugly highlighting on the button!) to set the word and location parameters back to their starting values as defined in the parameters themselves. For example:

This wasn’t quite so easy with resetting the NASA location, however. It always requires two clicks of the reset button and I can’t work out why. I suspect that is has something to do with the de-highlighting actions in the site list and map, but couldn’t fix it. Any help on this appreciated!

Finishing off

After that, it was just some final tidying up, adding further references and credits for logos and publishing.

And signing up for my name to be on the next mission to Mars. See links in the dashboard!

Edit: Added references for scaffolding and data densification