Brian
Posts by Brian
k
Real-time Workshop

James and I recently returned from a whirlwind road trip to SUNY New Paltz, to present at their inaugural Design Week. It was an exciting opportunity to share Fathom’s work with the wonderful students and faculty at New Paltz, and to conduct an introductory workshop on coding and information design.

Fathom was invited to lecture and lead a workshop at the inaugural Design Week event held at SUNY New Paltz
Fathom was invited to lecture and lead a workshop at the inaugural Design Week event held at SUNY New Paltz

Dimitry Tetin, a former classmate of James and newly minted professor of graphic design at New Paltz, reached out to us last month to see whether Fathom would be interested in speaking at the university’s new Design Week conference. The event featured presenters from a wide range of practices, including representatives from Shapeways and Kia Motors, author–artist Lev Manovich, and our Boston friends from Nervous System.

The lodge where we stayed, located on the grounds of a state park
The lodge where we stayed, located on the grounds of a state park

Upon arriving in New Paltz the evening before our presentation, the first thing we noticed was the starry sky over the hotel where we spent the night. Given the rural setting, the fact that the hotel was actually called a lodge, and several Fathomistas’ shared interest in Twin Peaks, certain comparisons were inevitable. No mysterious or paranormal activity was reported, however.

80s and 90s TV references abound around the office
80s and 90s TV references abound around the office

As with all of Fathom’s projects, we build our talks around audience and context. In this case, the attendees were predominantly graphic design students and faculty. So as James prepared to kick off our session with Accessible Depth, an introduction to Fathom’s work and process, he was excited to tap into our shared design school experience to make the talk resonant with this group in particular. How can we get graphic design students interested in data? How can we reach them as visual storytellers? What would we have wanted to learn more about in our design school days? These were the questions at the front of our minds.

James preparing to share the secrets of Fathom's success
James preparing to share the secrets of Fathom’s success

More than walking through images of past projects, James put a strong emphasis on Fathom’s perspective. We don’t simply execute visual iterations around content that gets handed to us, but are instead actively involved in the discovery and communication of ideas. James illustrated this by detailing our thoughts on the design process, the way we construct narrative through data exploration, and our unique integration of design, computation, and research. The talk prompted some great audience questions about Fathom’s practice, use of tools, and of course what qualities we are looking for in job and internship candidates!

Fathom's iterative process is based on collaboration across a unique blend of skills and interests
Fathom’s iterative process is based on collaboration across a unique blend of skills and interests

James’s lecture drew a crowd of faculty and students to the Drawing with Data workshop, where I introduced basic concepts of coding and data visualization using P5JS. As before, the audience was mostly graphic design students, which gave us a common starting point as we planned the class. The main question, however, was what we and the students should try to accomplish within the context of a three-hour workshop.

Brian introducing the workshop theme: alternative representations of time
Brian introducing the workshop theme: alternative representations of time

I led off by showing how coding can empower designers, and why Fathom likes working with data. We also offered the students conceptual hooks to think critically about design, and the visual maps we make between categories and numbers. This introduction flowed naturally into several live coding tutorials, followed by a hackathon-style session where students experimented with ways to represent time. We’ve found that clocks are a great introductory data set; they provide an easily obtainable, manageable set of numbers in intuitive categories. Plus the data is dynamic—it changes in real-time (in fact, it is real time).

New Paltz students Annamaria Palumbo, Layla Cummings, Rachel Stern and Sana Shepko were among those who shared their clocks with us, shown above
New Paltz students Annamaria Palumbo, Layla Cummings, Rachel Stern and Sana Shepko were among those who shared their clocks with us, shown above

Our goal for the workshop was to provide a point of departure for getting involved in code and data, and we were quite happy with the results. The students, many of whom had little or no prior coding experience, hacked, tweaked, cut-and-pasted, and coded from scratch to create a variety of digital timepieces. Like the lecture, the workshop generated discussion around important topics such as choosing the best design tool for a given project, balancing one’s designerly vision with personal technical limitations, and further avenues for learning more about information design and coding.

Commemorating the workshop with some of the students and faculty of New Paltz
Commemorating the workshop with some of the students and faculty of New Paltz

An inside informant told us that no trip to New Paltz would be complete without getting takeout from Mexicali Blue, to sample their amazing burritos and endless variety of hot sauces. For the record, James went with garlic salsa, while I tried the coconut and raspberry hot sauces.

Thank you, New Paltz! We’re looking forward to Design Week 2017.

k
The Architecture of Typography

Fathom’s recent Architecture of Typography workshop was a fun opportunity to hone our design skills and discuss trending topics in type.

Typography has become part of the public consciousness like never before. An ever-increasing variety of people, aside from graphic designers, are discussing Kerning, rags, and favorite (or most hated) typefaces. This dispersion of design across a variety of audiences resonates strongly with Fathom, as we intentionally pursue projects that cross creative domains.

aot-comicsans-mug

Recently, several Fathomistas with strong coding backgrounds requested an internal design workshop to share knowledge and skills, specifically about typography. One particularly vocal proponent, Jose, is a recovering architect studying at the Harvard Graduate School of Design. So, with a nod toward this interdisciplinarity and our own recent explorations in 3D space, the “Architecture of Typography” workshop was born.

James's clean, structured slides stood in stark contrast to the postmodern nightmare Brian was preparing to unleash.
James’s clean, structured slides stood in stark contrast to the postmodern nightmare Brian was preparing to unleash.

James and I, former classmates, offered to relive our design school glory days and lead the workshop. Studio interest was split between applied typography and design theory, so we divided it into two segments. The challenge was to avoid overwhelming our audience with too much content, while providing a good balance of technical–formal advice and a basic context in which to discuss type. Fortunately this was just the introductory session!

Slides from the anatomy of type lesson, culminating in a pop quiz.
Slides from the anatomy of type lesson, culminating in a pop quiz.

James kicked things off with the essentials: the anatomy of type, and how to look at and describe a letterform. There are of course many rules and theories that can be applied to typography, but everything starts with seeing type in terms of its shape and structure. After a quick pop quiz, James covered specific tips for common tasks, like choosing an appropriate typeface, and the basics of a strong layout. Followed, of course, by pinning work to the wall for a large group crit .

Discussing the typographic approaches of critical graphic design pieces, like The Falklands Project by Metahaven
Discussing the typographic approaches of critical graphic design pieces, like The Falklands Project by Metahaven.

I picked up from there and led a brief historical overview of digital typography. It is already a cliché to say that computerized media tools have revolutionized design. But by discussing concrete examples of typographic evolution across recent decades, we hoped to find some threads toward understanding the current design climate, including many independently published “critical design” works. Plus, it was a chance to show off a few old issues of Émigré from the collection!

No workshop would be complete without handouts. We prepared a list of popular, well-designed typefaces for our students to test in future projects.
No workshop would be complete without handouts. We prepared a list of popular, well-designed typefaces for our students to test in future projects.
A second handout featured typographically relevant designers, publications, software, and other useful things to explore.
A second handout featured typographically relevant designers, publications, software, and other useful things to explore.

It was a whirlwind session. To be honest, we could have dedicated a semester’s worth of classes to exploring the issues raised in this one-evening event. But this introduction was an important part of our response to the current design landscape. Fathom’s hybrid approach to making, which cross-pollinates research, computation, and design throughout the creative process, is all the more relevant as audiences from various backgrounds become increasingly familiar with design and technological concepts.

It all comes back to print. We rounded the evening off with a show-and-tell session of books, posters and accessories featuring interesting type.
We rounded the evening off with a show-and-tell session of books, posters and accessories featuring interesting type.

We hope to make this the first of a continuing workshop series, so stay tuned for more reports!

k
Radio Redefined

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.

k
How to share 20,000 maps

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!

k
The Circles in Suffield

One of the great things about working at an information design firm like Fathom is the opportunity to work with subject matter from all kinds of domains. In a single week, we’ve researched topics ranging from social issues that affect women’s equality, database management, and student debt. Recently we were even pulled into the vortex of an international cartographic mystery…

Zooming into a twenty-mile-wide array of circular roads, only to find... more circular roads?
Zooming into a twenty-mile-wide array of circular roads, only to find… more circular roads?

As our Twitter followers know, we’ve expanded the All Streets poster series to cover select countries around the world. The maps outline the geography of various states and countries by plotting only their streets. Of course the data is gathered and processed programmatically, but the maps still require human design attention after the numbers are crunched. To that end we give each poster a once-over for any odd patterns or marks that look like glitches rather than actual streets. It was this process that led us to the oddities in the southeastern tip of Alberta, Canada:

That's no moon...
That’s no moon…

A series of roads in nearly perfect concentric circles, over 20 miles in diameter at their widest, was sitting in the middle of rural Canada? We thought there must have been some kind of error. But when we double checked the source at OpenStreetMap, there it was: a label reading “CFB [Canadian Forces Base] Suffield,” enclosed within a foreboding red-striped area. A quick glance at Wikipedia told us that Suffield is “the largest Canadian Forces Base and the largest military training base in the Commonwealth.”

CFB Suffield, with its largest and outermost circular roads
CFB Suffield, with its largest and outermost circular roads

We switched to Google Maps to get a satellite view of the area, and quickly located the circles (although they didn’t appear in Google’s street maps). Looking a little closer, we noticed even more circles inside the original ones. How curious! But upon zooming in to get a better view, we were surprised to see even more circles! No less than nine in total. And at the center sat an oddly shaped formation or structure.

Zoomed all the way into the circles, a small structure/formation comes into view
Zoomed all the way into the circles, a small formation comes into view

We searched for more information about CFB Suffield, and found out it was established as a military base under the name Experimental Station Suffield during World War II for chemical warfare training. Currently it hosts a laboratory of Defense Research and Development Canada. We also discovered that we weren’t the only ones asking about the strange circles. Other mapping aficionados, local residents, and conspiracy theorists had noticed them too. Unfortunately, we weren’t able to uncover any definitive answers, although some of the speculation is intriguing.

From a forum discussion about the Suffield circles. Did we just get put on a list somewhere in Ottawa?
From a forum discussion about the Suffield circles. Did we just get put on a list somewhere in Ottawa?

So what’s the deal with the circles? Are they just roads after all? Divots from explosives testing? A giant particle accelerator? Or maybe the conspiracy theorists are right and it really is a landing pad for Canadian UFOs.

We're definitely on a list now
We’re definitely on a list now

Visit our print shop to get your own copy of the All Streets map for Canada, and use the code “ALIENS_AMONG_US” for a $15 discount!

Or check out maps of other countries and U.S. states.

Founded in 2010 by Ben Fry, Fathom Information Design works with clients to understand complex data through interactive tools and software for mobile devices, the web, and large format installations. Out of its studio in Boston, Fathom partners with Fortune 500s and non-profit organizations across sectors, including health care, education, financial services, media, technology, and consumer products.

How can we help? hello@fathom.info.