How Pop Chart Lab Made That Amazing Apple Infographic

Patrick Mulligan takes us step-by-step through the process of transforming a slew of data into a stunning chart.

After 18 months of putting together charts on everything from beer to professional wrestlers, we’re often asked at Pop Chart Lab how we come up with this stuff. Our method varies a bit from chart to chart, but there are some tools and processes that serve us well. Here, we detail how we assembled our latest product chart, “The Insanely Great History of Apple.”

We start all research in Excel. It’s a simple way to pool information, and working within the strictures of rows and columns gets us thinking about how to organize data. Here, we’ve pulled all Apple computer models released by year. We decided to start with the 1983 Apple Lisa, the first model Apple introduced with a GUI and something of a forerunner of the original Macintosh. We focused on form factors and chasses, ignoring “speed bump” revisions to avoid cluttering up the chart with nonessential designs. At this stage, we already had to make some decisions about how to classify models in the early to mid-’90s, when Apple would sell the same model in a few different packages--such as Centris, Quadra, Performa, or LC. After much debate, we ended up ignoring a lot of redundant models, and we came to understand why Steve Jobs focused on streamlining Apple’s product lines when he returned to the company.

In most cases, we do a first layout in OmniGraffle. With this chart, the data was breaking down so neatly that we jumped right to Illustrator. Ben Gibson, the cofounder and art director of Pop Chart Lab, spent hours and hours drawing 200+ Apple machines, and we had our first draft layout.

After we circulate a draft, we start working on comments and corrections. Here’s an email chain with the first batch of corrections.

Sometimes it’s not just a matter of making tweaks; in this case, we had to overhaul the design. The only category that remained constant throughout Apple’s history was all-in-ones, on the leftmost side. Apple didn’t introduce the other categories until later in its history, and some rubrics withered over time. Devoting one-fifth of the width of the poster to each of the categories wasn’t working; parts of the chart were very tight, while there was empty space in other areas. Moreover, it seemed simply like a catalog of Apple releases--there was no second level of data presentation here.

The aesthetic in this version was somewhat muddled, too. We were using a window motif from MacOS X, but the overlaid title was inspired by System 7. Because of System 7’s spare look, we had to dress up the title window with a status bar and an Apple graphic, which weren’t exactly true to System 7. But we liked the window idea and figured we could take it further.

The next step was a hand-drawn brainstorm. The breakthrough here was to start a category only when Apple introduced a product in that category. This way the focus would grow from one product line into several as you progressed down the chart. This was also more visually interesting to have colors “growing” into the chart from the side.

We had to move the Macintosh Portable out of the “portable” category for this new arrangement to work. This wasn’t too much of a fudge, because the Portable was extremely heavy and essentially a Mac SE in a different container. We renamed the “portable” category “laptops,” which the Portable certainly was not.

This arrangement presented a problem of its own: The top 20% of the chart would have a few models in the middle of the page and then a lot of blank space on either side. We moved into OmniGraffle to see if we could figure up with a way to fix this.

The first thing we decided was to insert another category on the left side of the page. This would help with the issue of too much empty space up top, and it would give us as many categories as colors in the original Apple logo. Switching to that color scheme was an easy choice.

We realized at this point that the products weren’t drawn to scale. We needed to figure out exactly how large these machines were, so they could be depicted in the correct relation to one another. We scoured the web to find the dimensions of all these machines, compiling them into an Excel document and applying a 1:20 scale.

We found Apple.com to be the best resource--it has official dimensions for every model the company’s ever released and classifies models by form, which helped us figure out which chasses descended from which. The site also has manuals for machines going back 30 years, which clarified a few sticky classification issues.

With everything in the proper scale, we commenced filling out the chart in OmniGraffle.

In this version, you can see that we’ve mostly solved the problem of a sparse top of the chart by including Apple machines in the “desktop” category. Through the mid-’80s, Apple was still releasing these alongside Macintosh models, so it made sense to include them. Now the bottom of the chart was becoming an issue--the red and orange categories, representing desktops and towers, start to look awful lonely after 2003 or so, when Apple began focusing on mobile devices. And there would be barely enough room in the rightmost category to depict all of Apple’s handheld offerings.

In this final layout, we figured out how to solve the problem of unpopulated categories--by having other categories “grow” as Apple trained its focus on them. This would not only give us the horizontal space we needed to depict all the models but would let the color bands serve as visual indicators of the kind of products Apple concentrated on over time. This was the second level of data presentation we were looking for.

We also decided to depict Apple peripherals in the leftmost column. To keep things sane, we limited it to mouses, printers, and the Apple scanners (who knew Apple ever made a scanner?). Someday, we might go back in and add the QuickTake camera, Apple-branded speakers, the Pippin, etc., but for this size of paper, we had to hold ourselves back. We let this category bulge near the top of the page to show that peripherals used to take up a larger share of Apple’s product line.


[Click to view larger]

With the arrangement settled, Ben went back into Illustrator and prettied up the rough data from OmniGraffle. We fully committed to the Finder window motif here, settling on a MacOS 8 look. We pulled the title of the chart out of the window, so it wouldn’t get lost, and used the title bar to name the categories. From this point, it took only a few more rounds of refining the computer illustrations and cleaning up typos and other bugs. To fill the “items” line in the window, we used the actual number of products depicted: 236. The used and available bytes were tricky: We thought about counting up the cumulative hard-drive space of every model on the chart, but in the end we used Steve Jobs’s birth and death dates as a tribute in the tradition of Apple “Easter eggs.”

Patrick Mulligan is the cofounder and editorial director of Pop Chart Lab.

Click here to buy a poster of "The Insanely Great History of Macintosh" for $20.

Add New Comment

11 Comments

  • Pop Chart Lab

    In response to Luci, this poster was put together on a pair of 27" iMacs. And one of our primary software tools is OmniGraffle, which is Mac-only.

  • Luci

    It's a pretty process, no doubt, but it was kind of ironic to me that not even one of the steps was done through or with an Apple program or device! God save Microsoft!

  • Bex

    Would have been nice to see the aesthetic change over time as well - white space replaced rainbow and revamped the entire advertising look and feel @ 1999.

  • Pop Chart Lab

    We left off stuff like the XServes because there simply wasn't enough room to include them--we intended this design to fit on an 18x24 piece of paper, and there are limits to how small you can make things--text in particular--without destroying readability. We skipped the first six years of Apple history for the same reason.

    We've gotten a surprising amount of feedback about the Xserves, though, so maybe we'll try to squeeze them in there somewhere.The Mac Portable is on there, though. It's in the desktop category, which is explained in the piece.

  • CM Harrington

    No AWS models, no mac portable, no XServes. Sure, it's pretty, but it's not even remotely complete. It's not difficult to look up this info on Wikipedia or Low End Mac. D+ for research, B for aesthetics (the lines of ascension aren't even accurate in some parts).

  • Shevonne

    I LOVE infographics, but I never thought I could create one cause I'm not a designer.  However, after seeing this article, I think I can at least attempt to make one. Thanks!