Olivia
Posts by Olivia
k
Guest Lecturing at Harvard CS 171

Last week Mark and I had the opportunity to be guest lecturers at Harvard’s CS171 Data Visualization course. It’s always great to be able to get out of the office to talk with people about the work we’re doing.

The CS171 course focuses on data visualization theory and covering a lot of ground in terms of learning to program and the basics of interactive visualization. We like being able to guest lecture for this course because we always hear from students afterwards that they enjoy being able to see how what they’re learning can be used outside of the classroom. Afterwards, students still had some commonly asked questions, so we thought we could answer some of those here.

Where do you find data?

This is a question we get a lot, and unfortunately there isn’t an easy answer. With our client work, they’re generally the ones providing the data, but with our curiosity pieces, the data is often sourced ourselves or even self-generated. For Scaled in Miles, Mark was interested in Miles Davis’ career and found a database of all of his recording sessions and collaborators, which became the main data source for that project. For Rocky Morphology, James watched all of the Rocky movies and recorded – by hand! – what type of scene was going on at every 1 minute interval. (He did this without telling us, otherwise we probably would have built a simple tool!) The USGS and NASA are great resources if you’re interested in earth science data. The UN and World Bank provide lots of interesting global data (which is where most of the No Ceilings data comes from), and the U.S. Census is obviously a key resource for U.S. data. Don’t be discouraged if you’re having a hard time finding data you want to work with. Unless someone is providing you with data, it can take some digging to find an interesting data set to explore.

You don’t seem to use D3. What tools do you use?

For our initial explorations and desktop applications, Processing is our go-to tool. (Ben is still its primary developer, and many of its features exist because he wanted them for his own projects.) Once we’re done sketching with Processing, we might port to JavaScript (if it’s a web piece) or deploy the application to another environment. For instance, we might build an installation on here using mostly Macs, and then run it on a Windows machine for the actual installation.

For the web, we stay away from visualization libraries because our job is to provide bespoke ways of looking at data, which often makes using a library more of a hindrance than helpful. (Another way of thinking about it is that visualization libraries rarely solve the things that actually take the most time for us.) Primarily, we write our projects from scratch in JavaScript and include the typical UI libraries (JQuery/JQueryUI) when useful.

For analysis and data-wrangling, we often turn to Python. We also do a fair amount of server-side work with Python, sometimes Node, and even a little Java.

We try to use whatever tool best suited to the job, and makes us most efficient, often employing many different tools at various stages. The No Ceilings project, for instance, started with a custom-built tool created with Processing. That tool helped get a sense of what was in the quarter million rows of data, and once we found something interesting, that was exported to Excel, which was used to generate charts and short write-ups that were delivered as PDF documents. The final site uses a lot of JavaScript, but also D3 for a piece or two, and even three.js for a 3D globe for mobile devices.

What are the differences between using D3, p5.js, and Processing?

D3 is primarily a data visualization library. It is great for getting a quick view of your data and we’ve used it here for just that on many occasions.

Processing is a part language, part library, part environment, and often used for creative coding. The main version is Java-based (as a “language” it’s sort of a dialect of Java), so the work you create with it is not readily usable on the web. However, it has a lot more juice than your browser, so when you’re working with large datasets, it can make those initial iterations happen a lot faster. It also can export out to PDF, which makes it great for creating the data-driven pieces of any print work you may want to do.

p5.js is a project that builds on the ideas of Processing but rethinks some of its base decisions for the web. Primarily, it can help simplify the process of writing HTML5 canvas applications. It’s a great starting place for learning to code in general (it’s what’s used by Khan Academy, for instance), but it’s also helpful when you find yourself editing a D3 example so much that you’re writing more code to change it than the example itself. When you get to that level of customization, p5 and the HTML5 canvas can be your friend.

Are you hiring? What do you look for in a candidate?

Yes! We are always looking for curious, driven candidates. We are not looking for someone who can “do it all,” but people who can think creatively about how to apply their skills – whether that be coding, design, writing, or managing – to the work we do. We also have internships throughout the year. If you want to learn more, check out our careers page.

Related posts
MIT 4.s02: Information Design
Girls Who Code
MIT 4.s50: Information Design
k
Lights, Cameras, Action!

Teaching and outreach are a really important part of our work. They help us stay connected to our local community, and give us an opportunity to see how people outside the office think about code and design. We also get to share different things we’re learning about. Over the past few weeks, I had the opportunity to help at both Scratch Day and a Girls Who Build workshop.

_MG_1389-e-s

Scratch Day celebrates the anniversary of the creation of Scratch–a programming language for kids. The all-day event at the MIT Media Lab invited kids and parents to experiment with new features of the language, meet with other Scratchers, and share work. The celebration not only introduces kids of all ages to programming, but also to MIT, and the local creative coding community.

I helped with an activity that showcased how Scratch can manipulate hardware and respond to physical surroundings. The activity, called Lightplay, consisted of a set of lights and rotating platforms hooked up to Scratch through a special set of blocks (the functions and variables of the language). Using Scratch, kids could control the color and brightness of the lights, as well as the speed and direction of the rotating platforms. There were ways to set up alternating color patterns, fading between colors, and even responses to different inputs like the volume of chatter in the room. There were also different toys and reflective objects, so kids could play with making shadows and patterns in the space.

It was amazing to see how quickly kids were able to start manipulating the lights and begin to solve their own problems like “How do I make the lights fade to red in a circle?” or “What happens when I shine both red light and blue light on an object? Will I get purple?” One of the most interesting parts was the number of parents who asked “How can I buy this, or build something similar?” The experience showed how excited the kids were to mess around with the code.

I also recently helped out at a workshop for Girls Who Build – a local group that develops open courseware and workshops on engineering for girls (our very own Leslie has developed material for it in the past!). The latest workshop focused on the intersection of computer science and photography. I gave a quick talk on image processing, and how math and computer science are combined to manipulate images for both analysis and aesthetic purposes. After the talk, the girls worked in small groups using Processing to manipulate photos they had taken.

The girls were really excited to get some insight into how some of their favorite apps, like Instagram and Snapchat, are able to produce image “filters.” A lot of the girls had never programmed before, but by the end they had all built or edited a filter in Processing. One girl even told me she was going to use her filters for all of her Instagram posts! Overall, it was incredibly satisfying to see how excited the girls were when they finally got a filter to work. More information on the workshop is available here, and soon the curriculum will be on MIT OpenCourseWare.

We see code as another tool for designers, artists, and engineers. We’re always interested in exploring new and engaging ways to teach programming, and in facilitating the use of code for creative endeavors. Both events were great examples of how creative coding can engage a wide variety of kids (and adults!) in programming. We’re looking forward to finding more opportunities to host or participate in workshops in the future. Perhaps we need a Processing day…

Related posts
MIT 4.s50: Information Design
Python Fridays
The Architecture of Typography
k
GE Transformation Timeline

We’re excited to announce our latest project, an interactive timeline for GE’s corporate website showcasing their transformation as a company over the last 100+ years. GE is one of the world’s largest companies, and that only feels more true as you look through their history, and see how they have influenced almost every sector of technology and industry. From healthcare to aviation, energy and power to television, GE has touched it all.

One of the illustrated headers Rachel created for the project. This one is for Appliances.
One of the illustrated headers Rachel created for the project. This one is for Appliances.

Fathom has done work with GE in the past, but it’s been a while! Recently, we teamed up with their team and our friend, Camille of Estuary Branding, to take a fresh look at GE’s historical timeline. The previous timeline was out of date in both content and structure. The goals of the new Transformation Timeline were to showcase the people, events and technology that define each of GE’s businesses, and demonstrate how GE has changed over time.

lightbulb2

The original timeline was a series of webpages with many image carousels, and it lacked a narrative flow. For our piece, we wanted visitors to get the big picture of GE, while also having the ability to explore individual events. The landing page features an awesome animation by Rachel, which highlights the world-changing technologies GE developed over its 100+ year history. Their innovations started with the lightbulb, and have evolved to the vacuum tube, and all the way to today’s wind turbines.

The landing page
The landing page

Below the animation there is also an overall view of the timeline. You can see how GE’s earlier history spanned mostly across light, energy, and transportation, while some of the later businesses, like aviation, didn’t start until almost midway through the company’s history.

A technology transfer
A technology transfer

Part of what makes GE such an interesting company is that they have people working across all different technological fields, and those businesses communicate and share technology with each other. We were able to show this in the timeline through technology transfers. Throughout the timeline, there are examples of these technology transfers, and a special view showing how two or more events across businesses are connected.

cats

There were also lots of events I didn’t know GE was responsible for. For example, Thomas Edison, not only a fellow Cooper Union grad, but also the founder of GE, invented the first motion picture camera. A video on YouTube recently surfaced showing a film of cats that had been recorded with Edison’s camera. That’s right, GE was responsible for (probably) the first cat video ever.

While they’re most famous for their spinning things (gas turbines, wind turbines and airplane engines), they have produced a lot of strange and experimental technologies throughout their history. One example is the Walking Truck, a machine created in 1969 to facilitate navigating rough terrain. The project ultimately failed, but it has inspired countless sci-fi cousins.

The gallery of GE Appliances images.
The gallery of GE Appliances images.

For some of the older consumer businesses, there are a lot of amazing advertisements and photography. We wanted to make sure that those materials, which GE has been known for in the past, were included in the timeline as well. For Appliances and Broadcast, we added a gallery view of historical images, which included things like ads for pink GE refrigerators and photographs of the first toaster ever!

Overall it was a pretty amazing project and there are lots of goodies hidden throughout the timeline. Check it out for yourself at ge.com/transformation!

Another illustrated header, this time for healthcare.

k
2015 Wrap-up

The past year has been action-packed here at Fathom. We gave numerous talks, hosted a great collection of visitors, and launched one of our largest projects to date.

2015-02-02-02

2015 marks year six for Fathom, and it has been a big one. Over the past twelve months we’ve given talks at Internet Week, Eyeo, Williams College, The World Bank, Tufts, the Visualized Conference, PopTech, SATE, the MIT Media Lab, and Olin College.

IMG_0485-b-e

Girls Who Code and Olin College came to visit and learn about Fathom, Processing, and how we work.

We launched one of our largest projects to date, No Ceilings, and showcased it at this year’s Clinton Global Initiative as well as one of their partnered events with Self Magazine.

We also launched a piece on Animal Trade with National Geographic, a series of Watch Faces for your Android Wear, and a 2.0 version of World Bank India.

book-crop

We were even able to launch a few side projects of our own that looked at the composition of Jaws, the poetic nature of U.S. city names, and we redesigned Ben’s The Preservation of Favoured Traces into a set of prints.

We visited Salem to talk design, technology and data at DeSoFa.

And when we were done trampling around Salem, we snuck in some time to teach Python, celebrate Tau and learn about shaders.

All in all it was a great year, and we’re looking forward to the next. See you in 2016!

IMG_1130

k
#NoCeilings meets National Geographic at Kew Gardens

In between the release of No Ceilings and working on Space Monkeys & Tiger Wine, I visited Kew Gardens, home to the most diverse collection of plant species in the world. While reading up on the gardens in preparation for my trip, I came upon a recent paper by four female researchers looking at the gender gap in the field of botany.

The researchers took every plant name in the International Plant Names Index (IPNI), and determined the gender of the original botanist who discovered and named each species. The results showed that while “approximately 20% of scholarly authors between 1900 and 2000 were female…female authors account for 5% of the new plant species names published during that time period.” In total, fewer than 3% of land plant species have been named and published by women.

View this post on a larger screen for the interactive version of the visualization above.

The gender gap in botany is particularly interesting because botany has historically been seen as a “feminine” science. As noted in the paper, women’s lack — or flat out denial– of access to publication services and resources may have contributed to the infrequency of their new naming publications. Beatrix Potter, for example, was forbidden from presenting her paper, On the Germination of the Spores of Agaricineae, at the Linnean Society in 1897, since women could not attend Society meetings. The gender gap in botany still persists, however it has become one of the smallest gaps in the sciences, with female botanists naming about 4 species for every 5 named by their male counterparts.

It would be great to see more research published within this vein, and used as a reference point for how the gender gap persists in access to academic resources, research opportunities, and availability of publishing and distribution.

On a related note, the data source for our most recent National Geographic project keeps record of international plant trade. In our early explorations for the project, we looked at both animals and plants and found that Woronow’s snowdrop (Galanthus woronowii), named in honor of Russian botanist Georg Woronow, was the most traded plant in 2013.

View this post on a larger screen for the interactive version of the visualization above.

Snowdrops in general (Galanthus spp.) contain the substance galantamine, which can be used in the treatment of Alzheimer’s disease. Though I missed their blooming season, I was able to find the common snowdrop (Galanthus nivalis) in the Kew Gardens Rock Garden.

The common snowdrop can be found in the Rock Garden at Kew Gardens.
The common snowdrop can be found in the Rock Garden at Kew Gardens.

A lot of our work digs deep into one area of expertise, so it’s pretty amazing when we can find ways they intersect. Who knows, maybe our interest in food will combine with our love of television next…

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.