k
Weather Girls

Projects at Fathom are highly collaborative – so I enjoy the luxury of designing things far beyond my own technical limitations, because I am paired up with at least one other person with champion developer skills. We also have a few hybrids who are extremely qualified on both fronts – but my own background has been primarily in graphic design and illustration.

To help round out the knowledge of people whose experience in these two areas tends to be a bit lopsided, we’ve held python classes, a typography lecture, and other small workshops to go over specific skills. As a more formal education effort, Ben Fry has also been teaching an information design class at MIT, now in its third semester and an official part of the D-minor curriculum. 

My fellow designer (and co-alum from Wash-UPaul and I took advantage of a small break between client projects to follow along with a few of the MIT assignments. It was a great opportunity to practice our technical skills and code everything ourselves from the ground up, using the p5.js version of Processing. The first project was to design and build custom apps that would pull weather data from the Dark Sky API. Before diving into any API data, I decided to start with some really basic weather sketches just using Processing. I began with a simple bar graph charting ten years of Boston snowfall totals. (For anyone who missed the record-shattering winter of 2015, here’s a photo of a nearly three-story snow pile near Back Bay for reference).

I then built a second sketch that translated the accumulation totals into falling snow, with heavier years translating into larger, increasingly opaque snowflakes. Users could click through all ten years to get a sense of how intense the winter was. The severity of the 110-inch record is reflected nicely in the Processing sketch.

After doing a few smaller studies, I felt ready to attempt working with the weather API. Dark Sky (and many other weather APIs) offer current data on a huge range of specific weather variables. Using a location’s geocoordinates, you can easily track several dozen weather stats such as humidity, visibility, windspeed, type and intensity of precipitation, time of sunrise and sunset – and of course, the moon phase. I tried sketching a simple anemometer (the instrument that looks sort of like a weathervane, except that it measures windspeed rather than direction). The rate of rotation in the sketch is based on current windspeed and plugging in coordinates for different cities. Now that I had one metric working, I was ready to build out more features. I had recently created a small arsenal of vector people, so I borrowed one of the girls and built her a wardrobe of outfits that would be selected according to the current forecast.

I then grabbed the latitude and longitude of about two dozen locations scattered all across the globe, and set up a sketch where people could click through and see not only the weather in these places, but also what to wear. I also built rain and snow into the program – these initial sketches were started in the dead of winter, and during several snowstorms in Boston, it was fun to check in and see equally intense weather reflected in the p5.js sketch.

I added an additional layer for extreme cold – as the temperature drops below zero, a transparent white rectangle becomes slowly visible (Note how cold Oslo looks at a bone-chilling minus 23°F).

Once the clothing, ranges, and base list of cities were all set, Charlie and Olivia helped me clean up the code and set up Weather Girls as a website and Chrome extension. We are hoping to eventually add regional clothing features, including a complete set of all black outfits for New Yorkers and a Boston Terrier to accompany our local weather girl. Visit fathom.info/weathergirls for your local weather details as well as current weather conditions all across the globe!

k
Exploring On Being

We’re thrilled to announce the release of a new project in partnership with On Being, the Peabody Award-winning podcast and public radio show that “opens up the animating questions at the center of human life: What does it mean to be human, and how do we want to live?”

We created a discovery tool based on the hundreds of conversations that have taken place over the show’s fourteen-year history. We designed an algorithm that distilled the episodes into a collection of key ideas and phrases, woven together by threads of related thought. Our aim is to allow listeners to explore the show’s archive and discover serendipitous connections between their favorite episodes and ones they may not have heard. Once users have found a topic that interests them, they can read the transcript, stream the full episode, or add it to a playlist and save it for later.

We wanted the visual design of the discovery tool to reflect On Being’s mission of exploring the human condition through conversation, so we created what we call “whispers.” These excerpts from the show’s transcripts fade in and out across the screen, highlighting the key phrases for each episode and giving the impression of overhearing an exchange between two people. Whispers that are most closely related to the current episode appear at the top of the page, so users can dig deep into a single idea or click on different themes to switch topics completely.

We enjoyed working with On Being because we share their sense of curiosity and attention to detail, which matches well with our design and development process. Over the course of a few months, we created several variations of the archive explorer as we worked with the show’s producers to figure out what features would be most useful to devoted followers and new listeners alike. Ultimately, we arrived at a design that combines audio episodes and transcripts with a collection of beautiful images and a focus on the unique threads of conversation that make On Being special. We hope you find something new while exploring more than a decade of thoughts and ideas.

You can check out the project here.

k
To the Moon

Lunar Phases is a sketch that grew from a series of mini-projects I developed with the p5.js variant of Processing. Each sketch was an exercise to practice the language and explore programming concepts as I learned.

Inspired by the assignments from our information design course at MIT, I began with a weather app that uses an API call to interpret current wind conditions and temperature as rhythmic patterns.

Another sketch was an attempt to visualize the HSV color model and build a color picker that navigates its structure.

Creating a simple visual tool to explain a process or system is a good coding challenge, and weather APIs are an excellent place to start because the data is observable, easy to access and frequently updated. I realized that natural weather patterns also provide great visual forms to start sketching, which got me thinking about how the lunar cycle might be illustrated in an interactive way.

After working out some ideas on paper, I began a p5.js sketch to see how I could animate between different phases. The first step was finding a way to draw a curve that could smoothly bend between a crescent and full circle. Using the bezierVertex() function, I tried layering curved shadows on an ellipse to approximate the effect of sunlight passing over the moon’s face. The edge of that twilight zone has a surprisingly aggressive astronomical name: the “terminator.”

To test the smoothness of the transitions, I mapped the curve’s intermediate bezier handles and control points to the mouseX position. The first shadow I created had its handles placed halfway along each curve, which made it too clunky to match a circle. I drew sample ellipses in Adobe Illustrator to measure the ratio of a handle to its curve. Then I stored this fraction as a variable to smoothly bend the shape into a perfect curve at any phase.

As the sketch developed, other elements became great exercises for wrapping my head around programming concepts, improving interactivity and thinking about the potential context of use. Mapping the lunar cycle directly to cursor position was a useful first step, but became a navigation obstacle as I added more pieces. In later iterations, I found that updating the cycle based on the distance dragged creates a much more natural interaction, especially with touch inputs on mobile devices.

Thinking through how to translate these pixel distances into meaningful expressions of time was also a satisfying challenge. I learned how to create arrays where I could store and update variables, such as a percentage of the lunation (that’s the full lunar cycle, or period between syzygies for the layperson). This number can be fed back in different forms: an input of 550 pixels might return “65% full”, “Waxing gibbous” and “Tomorrow” — all variables that I can then piece together to provide useful feedback.

The moon is tidally locked to the Earth, so whether you see a rabbit or a wrinkly old man, that side is always facing us. As a result, people see the same phase wherever they are, and this means the sketch can be updated accurately with a single API call per day. Kudos to Olivia and Ben for writing code to store those daily values, as well as a URL that accepts ‘moon’ with any number of o’s.

Moooooooooooooooooooooooooooon.
Take that, Google.

k
MIT 4.s02: Information Design

Last month, all of us here at Fathom were busy wrapping up 2016’s projects, not the least of which was our second consecutive semester teaching Information Design: Exploration, Navigation, and Understanding.

In its final incarnation before being integrated into MIT’s D-Minor curriculum as a required course, the Fall 2016 section was taught as a graduate workshop. Just like last semester, we had a diverse group of students from the Media Lab, Computer Science Department, SA+P, and the Sloan School of Management, and we divided the semester into four main projects, each of which covered a different aspect of the subject material:

  • introduction to design and p5.js with clock faces
  • context of use with a weather application for mobile
  • finding a story within census data
  • tying everything together with a “choose your own adventure” final project

These assignments run the gamut from very directed at the beginning of the semester to very open-ended at the end of the semester. The census and final projects consistently reveal that some students thrive in the open-ended environment, while others struggle to find direction and manage their time. However, regardless of their learning style, all students deserve the support they need to learn effectively, so this Fall we began exploring different ways of guiding the students through the course and projects. Although the final deliverable for each of the assignments was largely the same as last semester, we directed the students in a different way. This provided them with a bit more support, and gave us the opportunity to focus on the didactic qualities of process and iteration. To demonstrate, here’s the evolution of one student’s final project, from conception to completion over the course of six weeks.

Xinhui Li (final project)
Xinhui Li (final project)

During the first week, Xinhui Li, along with the other students in the class, settled on a project idea and story. This semester, we asked the students to identify four candidate datasets that they would like to use, one for each of the following categories:

  • Personal: some type of personal data that you’ve collected
  • Research/class: information design questions around your research, other classes, or thesis
  • Explanation: a complex idea that’s data-centric, and make sense of it
  • Curiosity: finding a data set that you think is interesting, and telling us a story about it or providing people with a way to explore it

This helped students fully consider the story that their final project would ultimately tell, without becoming overwhelmed by the coding challenges. Xinhui suggested using her Hubway activity for the Personal dataset, land reclamation projects in China for the Research dataset, topics surrounding national unemployment in the US for her Explanation dataset, and transportation habits in a sharing economy for her Curiosity dataset. After presenting her ideas and gauging interest from the other students and instructors, she decided to pursue the topic of land reclamation in China.

Once students had decided on an idea, they were given a week to collect and parse data. Data parsing is a challenging, but extremely important, aspect of information design, and we again wanted students to focus on this crucial stage of their project without being distracted or overwhelmed by the other stages. Xinhui’s first p5.js sketch didn’t actually draw on the canvas at all. Rather, it printed to the console to demonstrate that her program could load and internally represent the data she wanted to use.

XinhuiParse

The next two weeks were spent creating an initial visual representation of the data. At this point, we asked students to provide paper sketches alongside their code, to encourage them to occasionally step away from the computer and consider the overall design and ultimate goal of their final project. After Xinhui sketched out her visual ideas on paper, she had a template she could follow to guide the layout of her first p5.js sketch that used the canvas.

The initial representation demonstrated Xinhui’s ability to incorporate the map, data, and icons that she had gathered for her project, but there were a lot more refinements that could be made in the two weeks before the assignment was due. At this point, we began to shift our focus toward design and interactivity, helping students refine and iterate on their initial representations.

Xinhui’s second design iteration implemented the timeline that she had drawn in her paper sketches, added a title to give the piece some context, and changed the scroll behavior so that the map always remains visible in the browser window.

For her third iteration, she implemented more of the functionality from her paper sketches, adding satellite images and detailed information about each item in the list. Demonstrating her understanding of hierarchy in information design, she designed the list items to be expandable and collapsable, so that the user only sees detailed information when it’s relevant. She also included a legend that reveals at a glance the intended uses of the various land reclamation sites.

XinhuiFinal3

Between the third and fourth iterations, Xinhui implemented animated transitions to further refine the user experience, redesigned her legend so that it makes better use of the space she has available, added a description of her project beneath the title, and made the list sortable so that users can browse the data more easily.

You can see Xinhui’s final project here, and a gallery of student projects here.

k
First of Her Kind

Amidst all the attention given to the 2016 presidential campaign, it was easy to miss an important date in the history of women in American government. One hundred years ago, on November 7, 1916, Jeannette Rankin of Montana became the first woman to be elected to federal office when she won a seat in the U.S. House of Representatives.

Jeanette Rankin became the first woman elected to Congress in 1916.
In 1916, Jeannette Rankin of Montana became the first woman elected to Congress. (Image credit: Sharon Sprung/Public Domain)

Incredibly, her achievement came several years before the passage of the Nineteenth Amendment, at a time when women’s suffrage in the U.S. was a patchwork of state and local laws.

As Rankin put it, she was “the only woman who ever voted to give women the right to vote.”

To date, 45 states have elected female representatives, 27 have elected female senators, and 24 female governors. To celebrate their accomplishments, we created a poster showing the first woman elected to serve as governor, senator, and representative from each state.

The poster is now for sale, and like all our poster projects, the proceeds will be donated to charity.

The poster includes portraits of every woman to serve as the first female governor, senator, or representative from her state.

The past century has seen 392 women serve in these positions, but we wanted to put the focus on the women who broke the initial barrier of being elected by the state communities in which they lived. This is also why we chose not to include women who were appointed to their positions—we wanted to highlight the importance of the democratic process and how it might be shaped by changing perceptions of gender. It may not even seem that surprising that women have been elected to these positions, until you’re reminded that this is just 100 years of our government’s 240-year history, and that dozens of states still haven’t had a woman serve in all three positions.

The colors used in the poster–purple, gold, and green–were inspired by the colors used by suffragists in the United States and United Kingdom. Purple represented loyalty and dedication to the cause of women’s suffrage, gold symbolized “the color of light and life,” and green stood for hope.

A "votes for women" pennant in the traditional suffragette colors. (Image credit: Wendy Kaveney/Creative Commons)
A “Votes for Women” pennant. (Image credit: Wendy Kaveney/Creative Commons)

Three women appear twice on the poster because they were both the first female representative and first female senator from their state. They are Margaret Chase Smith of Maine, Jeanne Shaheen of New Hampshire, and Tammy Baldwin of Wisconsin.

Dianne Feinstein and Barbara Boxer of California were elected on the same ballot, so they’re both included. (Feinstein began serving a few months earlier, because her seat was part of a special election.)

Illustrations from the poster of Dianne Feinstein and Barbara Boxer of California.
Illustrations from the poster of Senators Dianne Feinstein and Barbara Boxer of California.

A few more things we learned along the way:

  • Nine states have elected women to all three positions: Hawaii, Kansas, Louisiana, North Carolina, Nebraska, New Hampshire, Oregon, Texas, and Washington.
  • Mississippi is the only state to have not elected a woman to any of these positions.
  • Delaware just elected their first female representative to the House this year! Lisa Blunt Rochester will represent the state’s at-large district.

While we were compiling the lists of women to feature on the poster, we came across countless inspiring stories. Here are a few that we found particularly interesting:

Edith Nourse Rogers became the first female representative from Massachusetts in 1925, and still holds the record for the longest-serving woman in the U.S. House of Representatives. She served until 1960, and sponsored more than a thousand bills, many focusing on veterans’ issues.

Edith Nourse Rogers in the House chamber in 1926. (Image credit" U.S. House of Representatives)
Edith Nourse Rogers in the House chamber in 1926. (Image credit: U.S. House of Representatives)

After a career in filmmaking, Ruth Bryan Owen was elected in 1928 as Florida’s first female representative. She served two terms and was later appointed by President Franklin D. Roosevelt as the ambassador to Denmark–the first woman to be appointed a United States ambassador.

Ella T. Grasso of Connecticut had a decades-long career in politics. In 1955, she became the first woman to be elected Floor Leader of the Connecticut House of Representatives. In 1974, after serving two terms in the U.S. Congress, she opted to not run for reelection and instead ran for governor of Connecticut. She won, becoming the first female governor of Connecticut and the first female governor in the country who wasn’t a wife or widow of an ex-governor.

After a storied career including fifteen years in the Hawaii House of Representatives, eight years as Hawaii’s lieutenant governor, and six years in the U.S. House of Representatives, Mazie Hirono became Hawaii’s first female senator in 2012. She is also the first Asian-American woman in the Senate. Much of Hirono’s work throughout her political career focused on advocating for pre-kindergarten education.

Mazie Hirono shakes hands with Vice President Joe Biden after being sworn in to the U.S. Senate. (Image credit: Mazie Hirono)
Mazie Hirono shakes hands with Vice President Joe Biden after being sworn in to the U.S. Senate. (Image credit: Mazie Hirono)

We hope you’ll buy a print of the poster through the Fathom print shop and help support some of the worthy causes that receive the proceeds. And we look forward to updating the poster with more firsts in the coming years.

 

blog-body

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.