Dencity, a map of global population density.

“Unprecedented” is a popular word in PR. Lots of things want to be unprecedented, few are. But last year’s hitting the population mark of seven billion was truly new. And just like how, for the past decade, a mild day in December or hail in July feels like a premonition of global warming, a transit hall on the day before Thanksgiving now quickly contains the association: there can be no more babies.

Experiencing a crowd moves fast from fun party to the black hole of Calcutta. On the larger scale of seven billion, it’s just hard to grasp. What is this unprecedented state like? How does being more change what we do? Where are all these people going? Last year, National Geographic asked designers to sketch narratives around “population density” and show how the world population relates the United States.

Not being chosen, we kept working on the project since we wanted to see what the world map could look like if drawn with numbers of population density instead of nation borders and topography.

If a map with country borders says something about war, politics, secured resources, and national identities, a map of people tells about popularity and access to the stuff of survival. There’s something interesting about how some people now identify with the regions where they have lived, rather than the nations where they were born.

Mark Monmonier said that any map is “but one of an indefinitely large number of maps that might be produced from the same data”. Since we wanted Dencity to be a poster — looking good on the wall and also show a more specific situation than a standard geographic map — we decided to turn a few things on their head.

When generating the first Processing sketches based on the density data, Chris flipped the scales of resolution. Dense meant smaller circle and sparse larger. By also creating different level of detail in the same map, which is contrary to the fixed level of standard heat map representation, we wanted to draw the eye to specific regions — show the action in densely populated areas (small circles of the reddest red, orange, and yellow) and give an immediate idea of where the sparser regions were (large circles in gray, blue, and purple).

These early sketches consisted of a square grid with finer and finer subdivision, in which inscribed circles were placed.

Last year’s summer intern, Lynn Kiang (now Lynn Wen), laid the foundation for the graphic design and this summer our designer James Grady finished it up.

Some things that struck us about the poster were that people like hot better than cold (excepting deserts). It’s hard to live on a mountain. There’s a big hole in the middle of Australia and if the world was a party, the kitchen, bar, back room, and porch would be found in Indonesia, on the stretch between Calcutta and Bombay, in Shanghai with neighbors, and around the Nile.

The map also inspired some questions that we may look at later. How has population density changed over time? How does it correlate with changing nation borders? Why and how do we move around and cluster? And what other variables than people change the shape and size of countries? We’ll see how it goes.

For now, the Dencity poster is available here.

What’s the biggest issue with U.S. energy use? This summer, after Katie Peek at PopSci asked us for a new take on the energy flow chart from Lawrence Livermore National Laboratory, we talked about which angle to make the most important.

In the original chart, LLNL outlines their estimates on energy resources and American consumption. There are many stories to tell with this data. All versions of this chart that we found online immediately shows how transportation is the biggest energy gobbler, at almost 36 percent of all energy used, and mainly from the most problematic resource: oil.

But another story that’s subdued in other versions is how more than 50 percent of all energy goes to waste in the United States. In the original chart, this is referred to as “rejected energy” and again — most of it happens in the category of transportation.  In our version, Katy made “energy loss” a larger portion of the final chart and added color and brightness to these graphs. How much of petroleum and other energy resources are lost as waste heat in the process of conversion or to inefficiencies in the infrastructure, was the point we wanted to make most poignant.

The illustration ran in the Future Energy issue of PopSci in July of 2011.

Katy with the July issue of PopSci.

Previous post.

Sometimes you need to meet the right story to make your own work come alive. For Frankenfont, it was the idea of setting Frankenstein, the novel, in a font made out of misshapen parts scavenged from PDF files found online.

Every time you make a PDF, the fonts from your document embed as subsets of the original font. The subsets lack the kerning information and other data for proper layout, and are therefore of little value to anyone extracting them in hope of acquiring a font for free, not unlike a store attaching ink tags to clothing to make them less desirable to thieves.

A few years ago, Ben wrote some code that collected these misshapen font parts, but unable to find a good use for them, he filed away the project for later. The thought “one day I’ll use this” can either turn you into a pathological hoarder or someone who pulls off creative projects so, luckily, Ben finally met what seems to be the saving grace for many projects: the right story at the right time.

When Kazuo Ishiguro began Never Let Me Go, he wrote for years about teenagers in a boarding school. He kept abandoning them for other stories, until one day he heard a radio program about advances in biotechnology. This inspired his driving force: the kids were clones, bred to be organ donors.

Never Let Me Go, like other stories touching the theme of responsibility for something we made that now has a life of its own, owes something to Mary Shelley’s Frankenstein. Frankenstein in turn owes Paradise Lost and Greek mythology (Titan Prometheus stealing fire from the Gods and giving it to man) for its theme, but the man-made setup was inspired by early nineteenth-century science, which is why the book is often considered to be the first science fiction novel. Another innovation: in Frankenstein, you root for the monster, not its human creator.

In perhaps the most heartbreaking sequence of the novel, the monster camps outside a cabin in the woods from where it eagerly follows the life of a poor family. He eavesdrops on their conversations and practices his own speech. He takes to their personal dramas and questions his own lack of family relations. He feels their pain, cares for their struggles, and, at night, helps them with chores for which his monster size and strength is handy. When he finally approaches the family and they reject him, Frankenstein’s monster becomes the bully who really just wanted to belong.

But it’s by no means a slasher plot from here. Nowadays the novel can be a bit tedious to read at times, but as a story — the monster’s journey of loneliness, love of one’s creator, innocence and sacrifice — it is timeless. Almost two hundred years old, the story contains enough universal themes to continuously inspire writers, filmmakers, animators —and designers. Frankenstein served as the perfect vehicle for Ben’s Frankenfont.

The typeface itself tells a story of how different fonts are used in office documents. The frequency of the letter from each font is calculated proportionally to how often that font occurs in a PDF. (This says something about how often people disregard design sensibilities and spiff up their presentation with Comic Sans.)  In the published piece, the arrangement of these letters reflects the progression of the Frankenstein narrative.

The beginning of the book, as Victor Frankenstein peacefully corresponds with his family, is visually calm, comprised largely of Arial, Helvetica, and the occasional Times New Roman (the by far most common fonts used in documents).

By pages 60 and 61, Arial Bold and Times Italic enter the story.

In the 200s, commonly used script fonts and more obscure faces begin to appear.

Towards the end, as the story dips deep into rage and despair, the pages crawl with non-Roman fonts, highly specialized typefaces, and even pictogram fonts, sometimes giving the story the feel of a Disney-style swearword.

The whole book is surprisingly readable, with the font emphasizing tone. “I will be with you on your wedding night” or:

…set with a mix of fonts, adds a dimension of anguish.

For those interested, you can purchase hardcover or paperback versions of the final book. As with some of the other items we sell online, we’re donating the proceeds: profits will be given to Donors Choose to buy books for students, which seemed apt given the nature of the project. We just finished our first month of sales, and we’re looking forward to spending the $600 in profits on Donors Choose projects.

The making of Frankenfont

The technical side of Frankenfont came about because of a fascination with the way that PDF files contain incomplete versions of fonts. When a piece of software (Acrobat Distiller, or the PDF driver, or the Mac OS printing system, etc.) creates a PDF, shape data of high enough quality to reproduce the original document is embedded. However, only the necessary characters (and little of the font’s “metrics” that are used for proper typographic layout) are included in the PDF. This is what prevents others from extracting the fonts to be used for practical purposes.

For each of the 5,483 unique words in the book, we ran a search (using the Yahoo! Search API) that was filtered to just PDF files. We downloaded the top 10 to 15 hits for each word, producing 64,076 PDF files (some were no longer available, others were duplicates). Inside these PDFs were 347,565 subsetted fonts. From those fonts, 55,382 unique glyph shapes were used to fill the 342,889 individual letters found in the Frankenstein text.

The initial code calculated how often different fonts are found in PDFs from internet searches. Next, it lined up all 342,000 letters in the book into one long list. Then, if the lowercase “e” from Arial is three percent of all the letter “e”s found in fonts in the PDF files, the first three percent of all the lowercase “e”s in the list of 342,000 will be set to that same Arial “e.” It continues setting each character like this based on usage, eventually getting down to the really odd things (that rarely appear in PDFs) toward the end and voila — a:

Graphic Design: Now in Production opened this weekend at the Walker Art Center in Minneapolis. The exhibition captures the expanding role of the graphic designer. Ben’s pieces Frankenfont and The Preservation of Favoured Traces are on display and we really want to go see it all. Check how fun it looks setting up.

Spread from Frankenstein, or the modern Prometheus

Preservation of Favoured Traces via @taulpaul

The pieces in the exhibition draws from traditional graphic design outlets such as books, magazines, and corporate branding. But the curatorial team also specify their selections as representing “ a series of developments over the past decade, such as the entrepreneurial nature of designer-produced goods; the renaissance in digital typeface design; the storytelling potential of titling sequences for film and television; and the transformation of raw data into compelling information narratives.”

Or, in a context provided by Alice Rawsthorne in the New York Times:

The sub-text of the show is that digital technology has both democratized the design process and empowered designers by giving them powerful new tools. “Designers have responded by becoming more expressive and experimental,” said Andrew Blauvelt, curator of architecture and design at the Walker, who organized the show with Ellen Lupton, curator of contemporary design at the Cooper-Hewitt. “Their work is more conceptual and analytical: a quest for autonomy and alternative modes of practice. We now have the designer-as-author, as entrepreneur, as editor, as producer, as publisher and as curator.”

continuing:

Graphic design is the largest area of the design industry, employing more than 250,000 people in the United States alone. Yet “Now in Production” is the first major U.S. museum survey of the discipline since 1996 when the Cooper-Hewitt presented “Mixed Messages: Graphic Design in Contemporary Culture,” which also was curated by Ms. Lupton.

Graphic Design: Now in Production is up until January 22 at the Target and Friedman Galleries of the Walker Art Center and will be presented by Cooper-Hewitt at Building 110 on Governors Island from June 2, 2012, through Sept. 30, 2012.

When Arts for Hearts asked Chris to make something for their annual charity, we decided to elaborate on a previous sketch that Chris made for fun.

The work on 9,999 + 1 began as we were working on a project about genetic disorders and realized how hard it is to genuinely relate to incidence — is one in ten thousand quite likely or really rare? For a happier context, we turned to plants.

A four-leaf clover grows for every 9,999 with three leaves. Yet, as with other anomalies that catches our attention, it’s easy to think they are more common than they are.

We wanted to make a piece that exemplified the probability of finding a four-leaf clover in a field of clovers (1:10,000) and at the same time had an emergent pattern. After sketching out ideas for a bit, we decided on a grid-like pattern where the word “luck” would emerge from a field of clovers.

Here is Chris’ report on the process:

Assuming a square grid of tiles (4×4) and 10,000 total clovers, each tile would have 625 clovers (16*625 = 10,000); we simply would need to remove one three-leaf clover in one of the tiles and replace it with a four-leaf clover to get the exact frequency.

A simple particle system for each letter made the word “luck” emerge out of a seemingly random field of clovers. Bitmapped images of the letters initialized the clover particles and constrained their final states.

As the clovers converged, the letters built vertically in individual frames. Finally, we assembled the tiles for multiple letters in InDesign to get a final layout. This wasn’t the end of the story, but really the beginning of multiple iterations that yielded a final design.

Some early sketches and late prints.

9,999 + 1 showing at Arts for Hearts’ silent auction in Faneuil Hall Market, Boston.

A new project, now posted:

This sketch started as something I wanted to build using the Fortune 500 ranking data, after finding a huge CSV file going back to 1955 had been linked from Wikipedia (it seems to have since been removed). I did most of the work while taking the train down to New York one morning, and since then have spent a couple hours here and there fixing it up further. Since it’s a sketch piece, it’s not perfect, but it’s a fun example of how you can interact with a really large amount of data in a very fluid manner.

Additional details for the curious:

• Many companies have merged, separated, or otherwise been renamed. I didn’t have time (nor interest) in going through tens of thousands of entries to figure out what’s what.
• The left and right arrow keys will move back and forward by year. The up and down arrow keys will move up or down through the list of companies. This isn’t perfect, because of how things reorganize, which is why it’s not advertised in the piece.
• No scale is shown on the vertical axis. It’s just not useful for how much it would interrupt the overall design. The point of the plot is to see an overall trend, and then look at individual values more closely.
• A log scale is used for revenue and profit. It’s the perfect example of why a log scale is useful because without it the plot looks like jumbled nonsense. On the other hand, because logs don’t play nice with negative values, there are breaks in the profit plots. Of course, this could be handled with some additional work, but I decided to move on instead. Nevermind, went back and fixed the negative values (losses on the profit view). If it’s on the internet is has to be perfect.
• The piece uses Java. I spent a few hours on a JavaScript version, but it ran at 3 frames per second (instead of 60; it’s like 1998 again!) It also required a 6 megabyte JSON file for all the data. All likely fixable, but no thanks.

Besides becoming a father this summer, I learned a few other things about life and design. I worked as a graphic designer for ten years. Two years ago, I left my stable and profitable job to go to graduate school at the Rhode Island School of Design (RISD). This summer, I interned with the team at Fathom.

I left my job to see what else design can offer (I think I’m onto something…). I’ve been frustrated with the separation of traditional graphic design and programming. Mainstream design software is also frustrating due to the separation between layout, photography, video, animation, interactivity, and coding. My experiences at Fathom not only broke down the walls between designer and developer, but also opened my mind to other ways of tackling design through programming and computation.

This semester, I’ll be at Fathom one day a week to work on an independent study: Visualizing Data, which I plan to incorporate in my thesis.

We had a ton of fun this summer. These are some of the projects I worked on:

Genes and Genetic Conditions

The challenge here was to take the overwhelming amount of content on genes and genetic conditions from the National Library of Medicine and make it accessible as a mobile app for a general audience. Having little knowledge about the topic, this was rather intimidating. But I soon realized I was designing for someone like me — a layperson — and having minimal knowledge can be an asset.

Chris, Eva, Shannon, and I worked on simplifying the categories, navigation, and interaction. The goal was to make it equally easy for the user to look at a particular gene or condition as to explore the whole system of how genes and conditions relate to one another. Chris and I worked on many iterations of navigation and animation transitions.

Population density

The challenge for this project was to create a narrative of population density — show how the world population relates to the U.S. We generated this map visualization with data from the Center for International Earth Science Information Network (CIESIN). Each circle denotes the number of people in that area. Larger, darker circles show areas with less people; smaller, brighter circles highlight crowds. White outline circles mark the top twenty cities.

(The project is a continuation of work done by last year’s summer intern, Lynn Kiang (now Lynn Wen). We were initially approached by National Geographic about doing a sketch depicting the story of the world’s population hitting 7 billion. Ours wasn’t chosen, but we decided to continue the piece because we liked it. —Fred)

I found it fascinating how the circles that represent people per square kilometer still create almost full geographical contours of the continents (and how few people there are in Canada, eh!).

Chelsea Football Club

Chelsea Football Club tracks their player performance with a sensor that monitors their physical activity during practice and rehabilitation. This sensor provides an amazing data set that Chelsea turned into power point charts.

Mark and I distilled the ten individual slides (e.g. foot distribution, acceleration, deceleration, distance, and force) into one interactive overview of each player’s performance. This way, the manager could quickly scan the charts to see each month’s performance and rehabilitation trends. The charts were detailed enough to show exact performance on each day.

We also designed a weekly team training overview. This chart outlines the daily team recovery, strength, resistance, speed, and reactions. Both of these charts were an interesting design challenge.

Something that stuck out in my first encounter with this type of visualization work was how the negative space of the graphics played as much a role as the positive space. It felt like I was designing a new typeface with a keen eye on form and counter form.

Rag Time

At lunch one day, I mentioned I had this idea for a typographic video game. At my old job I designed publications with lots of running text. I was constantly ragging and fixing line breaks. This is an important element of design for me. Whenever I look at somebody’s design work I always check if they know how to rag.

But it’s love-hate relationship.

Sometimes I have this dream where a wall of text comes crashing down on me like huge Tetris blocks that I have to correct before they smash my face. I told the team about this dream and Chris immediately volunteered to help make it a reality. Then he went off in the corner for two weeks coding (I thanked him in the end with a bottle of Johnnie Walker).

And here it is. If you think you have what it takes to be a good typographer I challenge you to three rounds of Rag Time. Don’t be a Scheisser Rag! My high score is 1678, which is a Guten Rag!.

Guten Rag!

A few weeks ago, Slate launched “Top Right”, a project “to identify the Americans who best share Edison’s dual talents for inventiveness and practical thinking.”

And when it came to designers…

BEN FRY NAMED TO SLATE’S “TOP RIGHT” LIST OF THE MOST INNOVATIVE AND PRACTICAL THINKERS OF OUR TIME

Slate has just named Ben Fry a “Top Right” honoree, Slate’s compilation of the 25 Americans who best combine inventive genius and practicality.

Fry was selected for his work in helping designers think like programmers, and vice versa. Here’s Slate’s piece noting Fry’s genius: http://www.slate.com/id/2301425/.

Slate’s “Top Right” follows the formula of the quadrant graph and honors those individuals who land in the top right quadrant between inventiveness and practicality – America’s best real world problem solvers. You can read more about “Top Right” here: http://www.slate.com/id/2298976/

To agree with Slate and show your support of Fry and his work, use this interactive feature that lets you choose exactly where honorees should land within the Top Right quadrant, in comparison with the four other picks for design geniuses. Here’s the widget (scroll down), where you can place them on the graph: http://labs.slate.com/topright/design/

What does it mean to be one in ten thousand? If this was the incidence of, say, blue skin — am I likely to encounter a blue person in my lifetime? Would it happen once? Many times?

I find it hard even to envision a crowd of this size. I can see thirty. That’s a school class, bunched together for some awkward activity like a photo shoot. I have a decent idea of what 200 people in a lecture hall look like. I know I have seen close to 20,000 people in one space at the Boston Garden. But even so, how relate “one in ten thousand” to my hopes and fears? No clue.

One in ten thousand is the incidence of a four-leaf clover. I never found one, but doing so seems likely to me. If I sit in a patch of clovers — I look.

Ten thousand is the number of bird species in the world. In the human brain, each neuron is connected to other neurons in about ten thousand different ways. One in ten thousand is also the incidence of Prader−Willi syndrome, a genetic disorder that causes insatiable appetite and obesity. So while finding the four-leaf clover seems likely, I’ve never knowingly met anyone with Prader−Willi syndrome and telling apart ten thousand birds or imagining one thousand connections seems insurmountable.

So why is this? The properties of clover play a role, of course. Clovers are smaller and move around less than humans, they come in only two kinds (clover with four leaves and clovers with other number of leaves) and are visible to the eye. But my illusion of ease for finding a four-leafer, has probably more to do with this Google image search for “clover”…

The ubiquity of images and stories of the four-leaf clover makes them seem likely. Just like celebrity-ridden media makes teenagers believe they are likely to grow up famous (rare) and drama-drenched features on child abducting strangers (even rarer) make parents afraid to open the door.

Most narratives focus on the crisis and the exceptions. This shapes the common idea of the world in more subtle ways than “the world is bad but I will win the lottery.” (While in reality, in America, things are getting harder on an interpersonal and financial level, while the world is getting less, not more, violent). In the book Four Arguments for the Elimination of Television, published in 1978, former adman Jerry Mander lays out the world view of television viewers, which includes detailed beliefs such as cops and lawyers being much more common real world-professions than they were.

But is it possible to show things in context, more true to the way they are, without putting the audience to sleep? Is it possible to find a sustainable storytelling of the normal?

Fortunately — as Chris shows here with 9,999 three-leaf clovers — the normal sometimes behaves in wondrously surprising ways.

What’s better than typography and ragtime music? A typography game and ragtime music.

The Rag Time game challenges you to fix a bad example of ragged text and make it Swiss-perfect. Rag Time puts you up against the clock to make the best rag you can.

What’s a rag?

Rags are commonly the most overlooked detail in typography. They are the line breaks to the right of this paragraph. A good rag goes in and out from line to line in small increments. A bad rag creates distracting shapes of white space in the margin. (See examples below). Don’t be a Scheisser Rag—Fathom high score is 1423—Guten Rag!

Take the Rag Time challenge.