Tabletop Whale is an original science illustration blog.

Made with love by a grad student at the University of Washington. Original charts, infographics, and science illustrations.

Half past orange: A rainbow color clock

This week’s post is a little less science and a little more design - it’s actually a side project I’ve been working on to practice R and Python.

I thought it would be fun to find an algorithm to define “what Eleanor thinks is a pretty color.” I think generative design is pretty cool, so the idea was to write something I could use to automatically pick colors for maps or vector patterns or graphs.

To define “pretty colors” I used R to fit adaptively smoothed splines to 264 colors I picked by hand. So that was a total of 792 data points - 264 for each RGB channel. (I thought about using CIELAB, but it was less intuitive for me to define “pretty colors” in LAB space).

These interlocking graphs describe every color I like, and none I don’t like: I’m still a beginner in R and Python, so this actually took a surprising amount of time. But I ended up learning a lot about different color spaces and the biology of human color vision.

For example, I wanted to include a hue variable like the “H” in HSV. But HSV doesn’t account for the fact that human eyes aren’t equally sensitive across the color spectrum. So I manually adjusted my own scale to look more consistent.

A linear HSV (HSV1) has too much green and blue. A HSV sine wave (HSV2) is better, but still doesn’t have much yellow. For mine I got rid of the ugly neon colors and increased the amount of orange and yellow: To test out the finished algorithm I made a rainbow color clock. The clock cycles through the color wheel every 12 hours using only colors I like. So that means no neon colors, muddy yellows, extremely bright pastels, or artificial-looking colors like 100% blue.

The clock also changes brightness every hour so that the half-hour mark is the brightest and the hour-mark is the darkest. I wanted fairly basic rules so you could actually use the color to tell time.

The color names are pulled from Chirag Mehta’s Name that Color Javascript library. It’s an awesome open source tool that finds the closest named color in a huge database of color names. I think my favorite names are Mantis green and Meteorite purple.

This is what the rainbow clock looks like in its original equation form. Each of the RGB channels oscillates up and down once an hour. The finished rainbow color clock lives here as a responsive web page. I think I’ll eventually laser-cut a plywood frame for my old phone so I can have a nice wall-mounted version in my office at work.

Virus trading cards

April 11 2016

This week I made a set of virus trading cards! Viruses are surprisingly symmetrical, and I love them because they remind me of a biological version of snowflakes. Each trading card shows you the structure of the viral capsid - the protein shell protecting the genetic material inside a virus.

To make the 3D animations I used UCSF Chimera, a free molecular modeling program. When scientists discover a new protein structure they upload it to the worldwide Protein Data Bank. Each entry is assigned a unique ID number, which you can use to call up the structure in programs like Chimera or PyMol.

I used Tom Goddard’s tutorial to learn how to display viral capsids, and it’s actually a fairly simple process. You can even 3D print structures straight from Chimera , which is awesome and might have to be my next project.

Virus trading cardsVirus trading cardsVirus trading cardsVirus trading cards
Virus trading cardsVirus trading cardsVirus trading cardsVirus trading cards

Here there be robots: A medieval map of Mars

February 27 2016

It’s hard to believe it’s been over a year since the last time I posted something on this blog! I’ve actually made a lot of infographics in the meantime, but most of them are caught up in production with some of my collaborators. Hopefully I’ll be able to share them soon :)

Recently I’ve been really into old maps made by medieval explorers. I thought it would be fun to use their historical design style to illustrate our current adventures into unexplored territory. So here’s my hand-drawn topographic map of Mars, complete with official landmark names and rover landing sites.

To add a little something extra, I included the history of each place name on the map. Martian craters are named after famous scientists (for large craters) or small villages on Earth (small craters). Since the base map is hand-drawn I also added an overlay of actual NASA topographic imagery. This way even if some of my lines are a little off, you can still see what the actual ground looks like underneath.