Portfolio // Data Visualization

This is meant to be a general survey of a fairly large swathe of concepts and examples with lots of links for additional specificity. I encourage you to follow links.1 I’ve tried to also mix it with quotes from a variety of designers.2 Those people are also worth exploring and most links will lead you to something that will lead you down an associative trail3 of links/searches..

Portfolio design considerations are grounded in many of the same design decisions that are foundational to good data visualizations. Many portfolios also include, maybe should include, elements that meet the typical definition of data visualizations although usually of small data sets.4 Both portfolios and data visualizations can be thought of as heuristics. You’re helping people think. You’re helping them understand you, a concept, a relationship, etc.

  1. Rich content brings meaning to a graphic.
  2. Inviting visualization interprets the content and highlights the essence of the information for the reader.
  3. Sophisticated execution brings the content and the graphics to life.

Dona Wong

Have an Audience in Mind5

The audience sets the initial frame for your consideration. Who are you trying to talk to? What are their likely experiences with websites and what do they care about? It’s also worth thinking about what might keep you from being attractive to people that you wouldn’t like. Assuming you have that luxury, it’s awfully nice to proactively remove yourself from situations where you’d suffer. In any case, there are common patterns that you’ll want to take advantage of.

Patterns may be more concrete than principles or heuristics, but they do define abstractions—the
best patterns aren’t specific to a single platform or idiom. Some even work in both print and interactive systems. Ideally, each pattern captures some minor truth about how people work best with a created artifact, and it remains true even while the underlying technologies and media change.

Jenifer Tidwell

In almost every case of anything, you are dealing with people who are busy6 and disinclined to stay on pages that don’t interest them in some way and fairly quickly. You need to consider what shows when that page first loads. What’s above the fold? You can even use data visualizations of eye scan patterns to think about how people read websites and what it might mean.

That’s not much different from how you might think about data visualizations. What is the audience experience with the data and visualizations more broadly? How does that shape what I build? How might I prioritize certain information and how do I think through an experience that invites deeper analysis?

Make an Argument // Deliver a Message

In a portfolio you are making an argument that you can do certain things. You’re trying to condense lots of time, energy, and effort into something that can be understood relatively quickly and yet represents the depth, complexity, and time you’ve spent honing these skills. That doesn’t mean it can’t also lead to greater depth and sophistication but you’ve got to get people interested first.

In data visualizations, even those that are exploration based7, you are making an argument. You believe some understanding will come from seeing or interacting with the data. Both scenarios are about communication and understanding. You’re taking on a larger portion of the burden of time and cognitive load rather than putting it solely on the viewer.

Least Effective Dose // Minimalism

Less is more is the refrain. You want to design rather than decorate. “We need to get more comfortable with whitespace.” but that doesn’t mean empty space.

Simplify – Just like an artist can capture the essence of an emotion with just a few lines, good data visualization captures the essence of data – without oversimplifying.

Stephen Few

There are some great examples out there of people taking really graphically heavy data visualizations and breaking them down in simple formats. I particularly like this revision of a banana chart. Dark Horse Analytics also has a series of gifs that take a busy chart and break it down to the most basic components. You can see one example below and other examples for simple tables, simple pie charts, simple maps.

An animation showing the progressive removal of clutter from a bar chart.

Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.

Edward Tufte

Digital // Analog

It’s also important to realize that while some of these items are only possible with fairly sophisticated software, there is also real power in simple hand-drawn images. XKCD is an online comic that routinely blurs the boundaries between the two while at the same time blurring the lines of education and humor. This particular comic also takes advantage of the web to do things that would be impossible with standard physical options. Hovering over any of the comics presents a second layer of the joke and a number of the comics play with the flexibility the web has regarding scale and the ability to scroll and zoom to release/see additional detail (The Earth’s Average Temperature, and Money for instance). It plays into the idea of revelation in this gestalt theory/data visualization document.That whole series is really nice. There are four of them and I get to them by changing the number in the URL.

Bret Victor’s presentation ‘Stop Drawing Dead Fish‘ is about art but can easily be applied to data visualization. He makes a number of strong arguments about when something becomes truly digital as opposed to simply digitized. It’s also worth checking out his explorable explanations work. He pushes the boundaries there but the conceptual considerations are what I’d encourage you to focus on rather than getting intimidated or over awed.8

This is the far end of the spectrum and really requires bending your brain to do really well. It’s not going to happen every time but being aware of truly transformative destinations helps set a bar that is aspirational. If your goals were simply to duplicate paper then a huge swath of affordances end up being ignored. That doesn’t mean there’s no scenario where you simply duplicate really good work on paper but being aware of the far horizon9 always helps.

A Portfolio

I’m going to apply some of these concepts to Dr. Tressie McMillan Cottom’s site. I didn’t break down the site with her so I’m making educated guesses in terms of the thought that went on.

An annotated screenshot of tressiemc.com indicating 4 areas of note.

Above the Fold

The following areas are visible when the page first loads and prior to the user scrolling. That is generally where the most important and most engaging content is placed.

Section #1 Menu choices are pretty close to a mini-outline describing your site. This represents (and links to) what is most important in your site. This is a place to simplify and condense. Tons of menu items results in awkward navigation. In most sites this menu travels across all pages so it’s the primary driver to allow people to access the main parts of the site. What are the constituent pieces that make the whole? What are the four or five most important pieces you’d want people to see?

In this case the menu items are CV, Research, Projects, followed by a grab bag item entitled EssaysTalks, Media, and More. That’s pretty typical for an academic portfolio. You could look at many academic portfolios and find that most have a very similar structure.

Section #2 is the next major design/visual area. This represents probably 90% of the above the fold area so it’s fairly important releastate. In web design terms this is a slider or carousel. Sliders are often meant to help you cheat a bit and include more visual content in a particular area by rotating content through. They’re meant to be visual and engaging and they remain a pretty popular trend despite some research indicating sliders may not be as engaging as popularly thought.10 The content here cycles through every X seconds or the user can navigate via the small rectangles at the bottom center of the slider.

Below the Fold

Section #3 This is the condensed biography paragraph. I put it through wordcounter.io to take a closer look at it. You can see it’s about 80 words and digital appears 3 times. Cottom, professor, and inequality appear twice. It’s not data visualization but repeating words shows importance.
Data view of intro paragraph that indicates 82 words, 590 characters.

Section #4 This section contains book reviews. Based on the arrangement it seems like Lower Ed takes priority over Digital Sociology. In terms of reviews it looks like the NYT takes priority over Harvard. They’re both pretty impressive for sure. The fact that they’re links changes their color and gives them a bit more emphasis on a scan of the text. That also creates association between the elements through the gestalt principal of similarity/invariance. The reviews are written in similar patterns which helps build consistency. It also make small inconsistencies stand out. You might notice the double dash rather than single in front of the Harvard Educational Review or the lack of leading double quotes for the BookForum quote. That’s not meant as a criticism just a reminder to create patterns that will be easy to follow or build workflows that force adherence. Humans wander when possible and have trouble seeing those variances in their own work. It’s usually much easier to see it in the work of other people.11

tressie.002
Section #5 There’s a sub-menu here. It’s an interesting shift from the menu at the top of the site. We have a repetition of CV as a link but there’s an addition of new elements – Public Lectures, The Daily Show, and Fresh Air. That’s a bit of a shift and the focus here seems to be a bit more on popular, rather than traditionally academic, topics of interest. These items are more specific and would likely fall under the Talks, Media, and More category of the main menu.

Section #6 Here we move into most recent posts. They’re a bit harder to follow. It’d be helpful to enclose them to show the unity of the elements that constitute a single post. It may be a case where things get a bit too minimal.

A list of years and months of blog posts on the right and a tag cloud of elements on the right.
Section #7 This section has two data visualization patterns. On the left we have a navigational element that breaks down years and months. In this case all months are listed regardless of whether that month has a post or not. You can see that through the color variation. It’s easy to take in at a glance that there are posts from 2012 to the present and there has been at least one post on every month in 2012, 2013, and 2014. On the right is a tag cloud. The use of tags in posts generates this automatically and increases in size indicates and increase in the number of posts that use that tag. #lowered has lots of posts while #r ends up with just one. That means it’s so small you might not even see it unless you look closely.


1 May own pattern is to command click to open interesting looking links in new tabs as I read. I also end up with many, many open tabs.

2 I’m not doing as well with diverse representation as I’d like so if you have cool people who aren’t white men please throw them my way.

3 h/t Gardner and Thought Vectors for getting me to read some of the old stuff.

4 You do want to be careful about over simplifying or arbitrarily simplifying your skills into something like “The Arbitrary ‘Skills’ Chart.”

5 That audience could be just you. Maybe you just want to do this to reflect on your own work or make something beautiful or strange.

6 . . . or at least convinced they are which is ends up being the same thing.

7 Think explorable explanations which tend to live in the intersection of simulation and data visualization.

8 Maybe that’s just me.

9 It’s best not to look at the date when Victor made these presentations.

10 Many sites I worked on have sliders.

11 I will see at least 12.3 errors in this post once I hit publish.