July 02, 2015

Written by:

Topics:

We’re pleased to announce the release of the No Ceilings data… in 3D. Yes, we know everything is cooler in 3D (the IMAX, Jurassic World, printing, real life), but our decision to represent the No Ceilings map as a 3D globe for mobile devices is better attributed to the design and processing limitations of phones rather than an attempt at enhancing our street cred.

For those unfamiliar, we recently launched a project for the Clinton Foundation and the Gates Foundation titled No Ceilings: The Full Participation Project, which measures twenty years of the progress and setbacks of women and girls around the world. In addition to the series of data-driven visualizations, the desktop version contains a map populated by roughly 850,000 data points from more than 190 countries over 20 years. Though the site is responsive to mobile screen sizes, we had yet to find a solution for making the exploratory map experience work on the phone.

The 3D globe takes a subset of well-populated indicators from the No Ceilings dataset, and represents the information from country to country on a spinning, zoomable globe. By sliding your finger across the screen, you can rotate the globe east, west, north, or south to see how stats vary by location. You can pinch and release your fingers to zoom in and out, and swipe across the top of the screen to select from a variety of topics.

The globe uses color differently to summarize both numeric and categorical data. Looking at numeric data like, say, the representation of women in national parliament, you can see that countries with bright green coloring (e.g. Rwanda, ringing in with the all-time high of 56.3%) have higher percentages of women in parliament, whereas countries with the dimmer blue tones (e.g. the U.S. at 17.8%) show areas with less female representation. The color gradient represents the fluidity of the scale, from high values (bright green) to low values (dark blue).

The categorical data, on the other hand, uses less of a gradient, and better demonstrates classification differences from country to country. Taking availability of paid leave as an example, countries are divided into three different groupings: those where paid leave is available for both parents (teal), for mothers only (blue), and those where it’s not available at all (yellow). Yellow is used to indicate countries where paid leave is not provided for by the government, and calls attention to the lack of important legislation.

Building the map as a rotating globe with zoom allowed us to design around the narrow spatial restrictions of a mobile screen. The globe was developed for WebGL using the Three.js library. In addition to letting us project the globe in 3D, WebGL allows us to maximize performance on mobile devices with low powered processors. This keeps the globe’s animations snappy and responsive to user interaction through thousands of calculations per second.

An increasing number of people use their mobile phones as a source of immediate on-the-go information, so while the available surface area and processing capacity may be smaller than a desktop computer, it’s important we design and develop websites, tools, and applications that are better catered to the ways that audiences consume information. While we certainly wouldn’t expect a user to explore all 850,000 data points from a mobile device, finding ways to tailor information to the mobile experience remains a priority. As devices are getting smarter, design and development need to move in parallel. So grab your phone, take a spin, and check out the progress.

June 23, 2015

Written by:

Topics:

In celebration of the 40th anniversary and special re-release of the famous movie that made us afraid to swim in the ocean, we present Jawsography, an interactive app that analyzes the cinematography of the 1975 film, Jaws.

I’ve always been fascinated by the art direction and cinematography in Spielberg’s classic film. While he executes many amazing filmmaking techniques throughout the movie, the strong compositional shifts from the left, center, and right hand side of each frame are striking. 

I wanted to see if the actual compositional shifts were as strong as my initial memories watching the film, so we built a tool that allowed us to look at all the frames of the movie. We started by looking at 1 frame per 10 seconds of film, but we ended up with too many transitional frames. The final app pulls 1 frame per minute of film.

Jaws at 1 frame per minute

The compositional patterns started to emerge pretty clearly. We built another tool that allowed us to cycle through the frames quickly, and mark which ones had left, center, or right visual weight. In due time, we began describing the positioning with nautical nomenclature: Port and Starboard.

I had so much fun swiping through the frames and determining which compositional weight was the strongest that I managed to wrangle most of the office into another boondoggle. I was determined to bring the app into reality. Quickly Jawsography was born. Take a look on your mobile device (or laptop) to see the cinematography of Jaws in a whole new way. Dive in!

June 23, 2015

Written by:

Topics:

Yet another year passed, and all the studio gathered to celebrate our favorite mathematical constant in commemoration of Tau Day!

Fathom_TauDay_01_Tau_Shirt

No matter your mathematical orientation, at Fathom we are open to all kinds of numerical beliefs and points of view. But when it comes to circle constants, we are heavily biased.

Last week, we hosted our second FiesTau party in preparation for the imminent advent of Tau Day. We know, we know, it was a week before 6/28, but it can be complicated to coordinate that many people

Last year we celebrated Tau Day big time: we released Peep in Tau, an app that lets you find any sequence of digits in the first 100,000,000 decimal positions of Tau. We also submitted an entry that was accepted on the Online Encyclopedia of Integer Sequences, the “sequence of positions of consecutive 9’s in Tau’s decimals,” inspired by the Feynman Point. It was an amazing evening!

Per tradition, this year we kicked off celebrations with Mark and Kim’s graceful contribution of the yummiest strawberry, rhubarb, and apple pies. Remember, you always need at least two pies for a full tau day.

Fathom_TauDay_02_Three_Pies
Yum!
The Half Tau Pie ;)
A Half Tau Pie ;)

Thanks to James, we had a full set of Fathom Tau Day 2015 Tau-Shirts for the whole team. Keep a lookout for their possible release on Provender…?

Fathom_TauDay_04_Tau_Shirts
Fathom Tauday 2015 Tau-Shirts

James was also kind enough to give us a private preview of a soon-to-be-released app based on a highly acclaimed 70’s movie. Can’t say much more at the moment, but sufficient to say that if you enjoyed Rocky Morphology, this one is going to blow your mind. (Edit: it is out! Please dive into Jawsography!)

The peak of the evening came with the yearly recreation of Taupardy!, our very own crafted Jeopady-inspired Tau quiz game. With a brand new panel featuring new categories and questions, I must say this year was much tougher than the previous one. And I must also say, my expectations were highly surpassed by my fellows… Well done guys, you are the nerdiest! ;)

Fathom_TauDay_05_Taupardy!
Taupardy 2015!
Fathom_TauDay_06_Taupardy!
Jose Trebek hosting the show.
Fathom_TauDay_07_Taupardy!
The Fathom team killing it.
Fathom_TauDay_08_Taupardy!
74.5% success rate!

In celebration of this year’s new incarnation of Taupardy!, we decided to clean it up a little and make the code open-source for our 2014 and 2015 panels! You can find the game on this github repository. Enjoy Taupardy! on your own Tau Day festivities, and let us know about them via Twitter, at @fathominfo. Oh, and feel free to pull any panels you may design to the repo and share them with the community!

Fathom_TauDay_09_Open-sourcing_Taupardy!
Final countdown to open sourcing Taupardy!
Fathom_TauDay_10_Open-sourcing_Taupardy!
And there it goes, out to the world!

We were very happy to have Malika Khurana, one of our former interns, visit us for the occasion. She shared some of her latest work with us, illustrating her journey from an engineering to art based approach to design.

Fathom_TauDay_11_Malika_Khurana
Malika Khurana presenting her latest interventions

We wrapped up the evening (well, not really, but the rest shouldn’t be disclosed…) with our traditional photoshoot, which for some reason turned out kind of ‘gangstau’…

GangsTauz!

We recently found out Michael Hartl featured some of our shenanigans on the latest State of the Tau report… ;)

And that’s all folks! Just remember, it is never too late to reconsider which dimension of the circle you advocate for.

Happy Tau Day 2015 from the Fathom team!

Happy Tau Day 2015 from the Fathom team!
Happy Tau Day 2015 from the Fathom team!

June 16, 2015

Written by:

Topics:

We’re pleased to announce the launch of our latest project, Space Monkeys and Tiger Wine: A Look at Global Animal Trade. Built for National Geographic, the project explores the quantity, purpose, and primary locations of trade for thousands of animal species around the globe. Between the exchange of duck livers for homeopathic flu medication, ground turtle shells for anti-aging remedies, and deer glands for their fragrant musk, more than 27 million animals were traded worldwide for reasons you’ve possibly (and we had certainly) never imagined.

Screen Shot 2015-06-12 at 2.21.26 PM

The final visualization breaks down the quantity of trade at different levels of the taxonomic hierarchy. Users can compare the trade of animal classes (e.g. reptiles, birds, fish), animal orders (e.g. alligators, snakes, turtles), and individual species (e.g. false map turtle, leopard tortoise, Chinese pond turtle).

We dealt with trade at a vast range of scales, and balanced animals exchanged by the millions with those traded by the tens or hundreds. Giving the tree map a zoom feature allowed us to represent animals on the same scale without distorting the depiction of those on the highest or lowest ends of the spectrum. Plus representing 4,100 medicinal leeches for every whale shark in a single view seemed as if it would suggest a misguided comparison.

In addition to the central quantitative representation, a hollowed pie chart (some call it a donut) enables users to explore the stranger qualitative oddities surrounding animal trade. Hovering over the chart shows the variety of ways animals are used (or consumed, exhibited, studied, domesticated, skinned, woven, schmeared, etc.) in the international market. American black bears, for instance, are traded for their teeth, skulls, hair, gallbladders, as trophies, and live. 85% of tiger trade, on the other hand, is for purposes in traditional Chinese medicine.

Screen Shot 2015-06-12 at 2.22.45 PM
By hovering over different elements on the right-hand chart, users can see shared uses for different species. Here you can see all carnivorous mammals used for medicine.

The visualization also shows the top three importers and exporters of each animal, so users can get a geographic understanding of the main channels of trade. France is the primary exporter of the muscovy duck, the most traded bird in 2013. After digging further, we learned that a French homeopathic manufacturing company produces a drug from the duck’s liver and heart, and the flu medication is widely circulated worldwide. While the geography of trade didn’t turn out to be our most compelling point, it certainly made for a useful way to contextualize the data.

Screen Shot 2015-06-12 at 2.23.40 PM
99% of muscovy duck trade is for medicinal purposes, nearly all exports are from France (likely from the homeopathic drug manufacturer, Boiron).

The project sources data from the CITES (Convention of International Trade in Endangered Species of Wild Fauna and Flora) Trade Database. The full database holds over 13 million records of more than 34,000 plant and animal species. The data we explored includes the trade of all animals listed in CITES’ appendix II, which contains animals that are not necessarily threatened with extinction, but that may be if their trade goes unmonitored.

If you feel uneasy about what you’ve read but strangely compelled to learn more, visit the site. Share it with your friends. Talk about it later over a glass of tiger wine and some turtle jelly laden toast, if that’s your thing.

June 10, 2015

Written by:

Topics: ,

Last weekend I participated in an annual Bike-A-Thon hosted by Bikes Not Bombs, which is a non-profit that runs youth programs in the Boston area. The organization teaches kids how to build and fix bicycles, and they also run an international program that sends bikes to developing regions in Africa.

We thought the Bike-A-Thon would be a nice opportunity to support a local organization that’s also doing great work abroad. Once my team reached our fundraising goal with the amazing support from family and friends, the Fathom poster fund matched our numbers. At Fathom we design and sell posters as a side project to raise proceeds for various charities near and far. You can read more on that here, but the poster fund was a great way to bring Fathom into the fold of the Bikes Not Bombs program.

Data Insights

  • My pace was 12.9mph, that’s comparable to the fastest marathon runner ever (and yet I was on two wheels).
  • My total energy output according to Strava was 977 kiloJoules (kJ). If I had somehow powered that into my apartment, I could have saved $1.15 on my electric bill.
  • My elevation change was 1,362 feet which I learned is the exact same height as the One World Observatory, on the top of One World Trade Center.

It was great to see so many people coming together for the Bikes Not Bombs cause. We hope to grow the team for next year’s event. Until then, we’ll be installing more bike racks in the office to accommodate some new members of the Fathom team!

May 21, 2015

Written by:

Topics:

This week has been filled with some exciting travel and speaking opportunities for the Fathom team. Ben teamed up with Chelsea Clinton in NYC to give a talk at Internet week, and Teri, Alex, and I spent a day in D.C. presenting our work at the World Bank Group.

IMG_7227
Ben and Chelsea Clinton presenting at Internet Week, New York, NY

Internet Week celebrates the entrepreneurial spirit and global impact of technology on business, entertainment and culture. Ben took the opportunity to present the process of translating 850,000 data points into a series of accessible, compelling, and interactive stories that live on a larger content platform. He also previewed some of our current work in progress; we are optimizing the No Ceilings map to run on mobile devices using WebGL. Soon users will be able to navigate a 3D globe to access and share the No Ceilings data.

Screen Shot 2015-05-21 at 11.32.00 AM
3D No Ceilings map running on mobile

A few other folks from the office headed to D.C. to present a few projects to the World Bank Group. The event was organized jointly by the India Country Management Unit and the Social Inclusion Global Solutions Group. We spoke about some of the custom tools we created to analyze the data for What the World Eats and No Ceilings. The folks at the World Bank were both excited and surprised to find that 13% of the indicators used for No Ceilings had come from their World Bank Open Data catalogue.

IMG_4639
Alex and James outside the World Bank Group’s headquarters. Washington, D.C.

We also had a great dialogue around Open India 2.0, a project we created for the the World Bank Group’s Country Partnership Strategy with India. Open India navigates the progress and challenges of one of the world’s most populous nations by tracking the development of hundreds of projects and knowledge activities across three areas of engagement.

Landing page screen shot of Open India 2.0
Landing page of Open India 2.0

We’re grateful for the opportunity to reflect on the process and progress of some of our recent projects. Keep an eye out for the Fathom road show heading towards a town near you.

May 14, 2015

Written by:

Topics:

We aren’t a poster company, but over the years our love of print has driven us to design a collection of printed artifacts (see Scaled in Miles, All StreetsDencity, and Frankenfont). Our print explorations often occur alongside client work, and reflect the range of interests (and occasionally obsessions) of folks around the office. We donate all of the print-generated proceeds to charities.

image6
Through Donors Choose, we helped schools purchase materials that we also enjoy using, like a projector. Here’s one of the thank-you letters from a sixth grader in Philadelphia.

A large portion of this year’s sales traffic came from a post on Reddit, a radio appearance on BBC Radio, and write-ups from WIRED, FastCo and Quartz. We’re thankful for the interest they’ve sparked, along with all of those who have generated traffic by word-of-mouth (or tweets). Any sharing of our printed work directly impacts the amount we’re able to give away.

We’ve made a point this year to donate to communities both at home and abroad. Read on to learn about the local, national, and international organizations we’ve selected for this year’s donations.

Local

  • Girls Rock Boston empowers girls through musical education and performance (they’re like the movie School of Rock, but even more badass).
  • Food for Free distributes fresh produce to underserved communities in Boston (if you haven’t noticed, we’re enthusiastic about urban farming).
  • Somerville Homeless Coalition provides housing services, emergency shelters, food assistance, and case management to our local stomping grounds.

National

  • Donors Choose supports classrooms in high poverty districts with STEM-related books and art supplies (we’re talking textbooks, crayons, 3D printers, the whole works).

International

  • Médecins Sans Frontières (Doctors Without Borders) gives emergency aid to those affected by armed conflict, epidemics, healthcare exclusion, and natural or man-made disasters.
  • Congo Medical Relief supports families of healthcare workers lost in the fight against Ebola (some of the heroes that worked with our friend, Pardis Sabeti).
  • Save the Children has a fund for helping children affected by the devastating earthquakes in Nepal.
  • Mercy Corps was on the ground in Nepal before the recent earthquakes, and their relief efforts are providing food, water, and other emergency supplies to survivors.

Some students sent us drawings of the art supplies they received (Donors Choose).

On behalf of the organizations in this year’s lineup, thank you for all for your orders! To learn about our donations in other years, see our previous post.

If you’re interested in purchasing a print, check out the 3rd floor (prints we stock and ship from our studio), All Streets collection (printed on demand in California), and Frankenfont (printed on demand from Blurb).

Thanks again from all of us at Fathom, and stay tuned for the next print in our collection.

May 07, 2015

Written by:

Topics:

On April 25, 2015, a massive earthquake of magnitude 7.8 struck Nepal. Since then, multiple aftershock tremors of magnitude 6 and greater have caused devastating casualties and damage in Kathmandu and its neighboring areas. Papua New Guinea, too, was in close proximity to a 7.1-magnitude earthquake earlier today. As our thoughts are with the affected families and communities, we’ve updated our earthquakes web explorer with the most recent data to shed light on the immensity of the recent earthquakes and their aftershocks.

Please consider donating to local and international relief efforts.

Many of the world’s most densely populated areas sit along the most seismically risky locations. The Nepal earthquake was triggered by the release of escalating tension along major fault lines, where the plate containing most of Europe and Asia overrode the subducting India plate. The Nepalese capital of Kathmandu, home to more than one million people, sits just 48 miles southeast of the earthquake’s epicenter.

There have been four magnitude 6 earthquakes along the boundary of the India and Eurasia plates in the last century. In the last month alone, there have been 379 earthquakes between magnitude 4.5-9.0 around the world.

Our web application demonstrates that the most densely populated areas are often at the greatest risk for high magnitude earthquakes. Many of these high-risk regions require improved infrastructure that can sustain the frequenting tremors.

The Himalayan region is one of the most densely populated (light green) regions in the world, and also puts the residents at extremely high mortality risk (red).
The Himalayan region is one of the most densely populated (light green) regions in the world, and also puts the residents at extremely high mortality risk (red).

We hope our tool can act as a guide as to where we can focus future efforts to improve infrastructural and institutional preparedness. Please take the time to learn more, and support the international aid efforts where possible.

fathom.info/quakes

May 06, 2015

Written by:

Topics:

Some of us at Fathom are easily sucked into geeky hobbies. When I first came across a site dedicated to SDR, or software defined radio, I turned my desk into a makeshift communication outpost for several days to learn the basics. It turned out to be surprisingly relevant to our core interests of data visualization and programming.

A farmer listens to an early radio broadcast. While communication technology has evolved, radio remains a critical medium today. Photo courtesy of the National Archives and USDA.
A farmer listens to an early radio broadcast. While communication technology has evolved, radio remains a critical medium today. Photo courtesy of the National Archives and USDA.

In recent years, software defined radio (SDR) has become a popular pastime among a small but enthusiastic community of hobbyists. SDRs are radios enmeshed with computers. Software that runs on a standard personal computer can replace parts of the radio that we typically think of as physical objects with wires and knobs—like amplifiers, filters and so on.

We used this small, inexpensive USB dongle to scan a wide range of radio transmissions.
We used this small, inexpensive USB dongle to scan a wide range of radio transmissions.

Integration with the computer makes SDRs extremely versatile. They can be applied to a variety of projects, such as building a simple FM tuner, receiving broadcasts from satellites, and even DIY radio astronomy. Best of all, they’re cheap! So we purchased an SDR kit for the office, opting for the extra large whip antenna, and took it for a spin.

Our setup included a laptop, SDR dongle and a 5-ft antenna. High-end equipment is available, but this was enough to have some fun.
Our setup included a laptop, SDR dongle and a 5-ft antenna. High-end equipment is available, but this was enough to have some fun.

SDRs are relatively new and still a niche interest, so the available software is predominantly developed by the user community. Several applications are available for specialized purposes, but it seems the largest platform for developing custom tools is GNU Radio.

A small radio tuner script written in GNU Radio Companion's visual programming environment
A small radio tuner script written in GNU Radio Companion’s visual programming environment

GNU Radio offers a collection of software blocks written in C++ that handle low-level functions like signal processing. It’s packaged in Python for a convenient and approachable API. With GNU Radio, applications can quickly be written in Python, or using the convenient node-based visual development environment in the GNU Radio Companion.

Following some readily-available tutorials, the first program we made was a basic FM receiver. Here it is tuned to WMBR, the MIT campus radio station.
Following some readily-available tutorials, the first program we made was a basic FM receiver. Here it is tuned to WMBR, the MIT campus radio station.

Of course, dedicated members of the SDR community have written much more sophisticated applications. One of them is GQRX, a free and open source project built on the GNU Radio platform. Its basic workflow features a precise tuner augmented by visualizations of real-time activity on the radio spectrum. As with any radio, users can only listen to one frequency at a time, but a Fourier transform graph shows activity across the entire bandwidth of the range the radio is receiving. Simultaneously, a waterfall graph ticks along below it, showing broadcast strength at each frequency over time. Aside from the geeky coolness factor, this is also a great application of visual design to a technical challenge. The visualizations let users examine a broad range of frequencies at a glance to find active stations, rather than having to blindly try each frequency one at a time. The program is immensely useful when exploring frequencies outside the well-known commercial radio range.

The GQRX Fourier transform graph (top) and waterfall (bottom) showing two broadcast stations.
The GQRX Fourier transform graph (top) and waterfall (bottom) showing two broadcast stations.

While we were considering other SDR projects to try, we discovered that it is possible to download imagery from NOAA weather satellites as they pass by. We’ve been doing quite a bit of cartography lately (see No Ceilings, All Streets, Urban Agriculture) so this seems like a natural next step, and we hope to have some weather maps ready to share soon!

People may not be listening to music on the radio as much as they once did, but our electronic devices are constantly “on the air,” transmitting and receiving data via radio waves to keep us connected. One reason why we are interested in SDR is because it lets people peek into those layers of data, which would otherwise be inaccessible. And making the inaccessible accessible—or the invisible visible—is the goal of data visualization.

So don’t touch that dial! We’ll be back with more after the break.

May 01, 2015

Written by:

Topics:

The social–sharing experience is a crucial and often overlooked element of information design. In addition to updating content and the UI/UX of our latest No Ceilings site, we are constantly developing its “shareability.” Between deep linking, bite-sized graphics for stories, and pre-populated social links, we have made sharing as easy and visually compelling as possible.

We strive to make sharing well designed, like this recent tweet about women entrepreneurs and executives
We strive to make sharing well designed, like this recent tweet about women entrepreneurs and executives

Deep linking has been active since launch. It allows viewers to share a map view of any indicator at any given year. We realized, however, that a truly shareable map must also be embeddable. That is, viewers should be able to peel off any story from the data-driven map and show it on their own sites or presentations.

Embeddable map (right) redesigned to communicate the information, look and feel of the original (left) at smaller sizes and as a static image
We redesigned the original map view (left) into an embeddable image (right) to better communicate its information, look, and feel at smaller sizes and as a static image.

Making the map embeddable required significant design and technical work. In addition to layout and typographic adjustments, we needed to generate over 20,000 static images to recreate every map setting in both the original web colors and a new, more versatile palette. But the hard work was well worth it. The new embeddable maps include all critical information at a scaled-down size, in two color schemes. While they can stand alone on external sites, each image links to the original map from which it was shared, opening a path to the No Ceilings site for new visitors.

Viewers can now share No Ceilings data maps on their own sites in a matter of seconds
Viewers can now share No Ceilings data maps on their own sites in a matter of seconds
A new color scheme option makes the maps visually compatible with a variety of external sites
A new color scheme option makes the maps visually compatible with a variety of external sites

The embedding feature is a valuable tool for journalists, scholars and anyone with a blog or website. By simply clicking the “Embed” button and copy–pasting the given code, anyone can share their findings from the No Ceilings data map. So explore, share, and speak out!