Rough drafts and sketches: Virus Infographic

November 23 2016 · See the original infographic


For my last blog post I published a poster about a few of the many different kinds of human viruses. I thought today I’d post an extra blog post on how I designed the poster.

The “blob-tree” itself was fairly simple - I started off by making a grid with enough squares for each of the viral species. Then I arranged species groups and fiddled with the layout until I had something vaguely symmetrical.

After filling in all of the blob-tree branches, I rounded out the corners and added some subtle color changes to differentiate between major virus types. This infographic originally started out pink and purple on a cream background, but then I decided that a green-black color scheme would be a better fit for the virus theme.

Finally I added the text (Moon font by Jack Harvatt) and the symbol icons (from Font Awesome by David Gandy). Font Awesome is a library with more than 600 open-source icons, and I use it in pretty much all of my web projects.

For this poster I also used a noise texture that I made from copyright-free NASA star photos.

post.title

A flowchart of dangerous viruses


For this week’s infographic I made a poster about some of the most common kinds of human viruses. Viruses cause anything from the common cold to more serious diseases such as HIV, rabies, and Ebola. Because we can’t use antibiotics to treat viruses, vaccines are vital to protect people and animals from deadly diseases.

My goal for this infographic was to visualize the huge variety of viral species. I used small symbols to categorize several interesting aspects of each virus - whether or not it was transmitted by insects, used DNA vs RNA, or if a vaccine existed for the disease. We still don’t have a vaccine for many of diseases on this infographic, but I think it’s encouraging to see how far we’ve come (particularly for devastating diseases like polio, smallpox, and rabies).

When I started the project I had a list of about 60 viruses I needed to organize into neat groups. Since viruses aren’t technically alive, I wanted to illustrate my list in a way that reflected the unconventional taxonomic relationships between virus species. In the end I decided to make a “blob-tree” that grouped viruses into general categories, but didn’t make definitive statements about ancestral virus hierarchy.

I used 33 different source articles for this project, from organizations such as the CDC and WHO. I also had help from Dr. Arun Mathews, a Chief Medical Officer in Texas who fact-checked my work and suggested useful articles.

post.title

Making animated GIFs in Python


This week’s blog post is a quick break from science infographics! I use Python pretty often at work, and recently I’ve also been experimenting with using it for design. For this project I wanted to make a browsable color palette website like Adobe Kuler, but with animated design examples for every color palette.

To do this I first wrote a Python script to make a GIF illustration for any 5-unit color scheme. The script features five different animated patterns, all based on Islamic mosaics. The code isn’t anything fancy - I used the basic Matplotlib graphing library to make each pattern and ImageIO to output images.

Next I picked 50 of my favorite color palettes, most of which were loosely based on popular colors from Kuler and Color Hunt. I decided to stick with only colorblind-friendly color palettes for a more useful and curated project.

I also wrote a script to generate titles for each color scheme. A lot of online color palettes have great names like Cherry Cheesecake, and I wanted to try and automate my own whimsical titles.

For the title generator I made a library of my favorite color names organized by color (pumpkin, cherry, buttermilk), as well as modifier words. Next I specified which two colors were dominant in each color palette, and let my script generate appropriate color scheme names for each entry.

Finally I combined all of the code and fed my list of 50 color palettes into the GIF-and-title maker. The final website randomizes the color schemes in Javascript so that it’s more fun to click through each color palette.

EDIT: I’ve open-sourced the Python code here for anyone interested in the project.