The ten graph challenge

If you’re like me, you’re a data nerd. You love digging into stats to try to uncover trends and tell a story.

You might even be pretty good at Excel.

But when you create graphs they look boring yet cluttered, like they’re out of a corporate PowerPoint slide.

Are you like me? Then you should take the #10GraphChallenge.

The rules are simple: Create ten different graphs, focusing on making them simple, easy to understand, and visually appealing. Post them to Twitter for the world to see, and try to tell a story around each of them. Use a variety of datasets and a variety of graph types.

I recently finished the challenge. Here’s what I came up with.

A collage of my ten graphs. Data included weather, taxes, running, finances, crime, hockey, lacrosse, blogging, real estate, and road tripping.
A collage of my ten graphs. Data included weather, taxes, running, finances, crime, hockey, lacrosse, blogging, real estate, and road tripping.

View the thread on Twitter for more context and commentary on each of the ten graphs.

My goal with this blog post is to inspire at least one other person to take the challenge. You can do it any way you want, but here’s how I did it.

1) Find data for graphing

Data is everywhere. If you hear an opinion that you disagree with, see if you can find data to prove that person (or yourself) wrong. If you’re into sports, see if you can dig up something interesting that no one else is talking about.

I used a Trello board to track ideas. It started slow, but I ended up with 22 different graph ideas.

My Trello board. The first four columns are empty because I’m done, but all ideas started in the leftmost column then worked their way to the right as I either completed or rejected them.

Gathering data for me was usually a matter of pasting it into Excel, then cleaning it up and digging in. Try conditional formatting, pivot tables, and a variety of chart types to get a feel for what the data is trying to tell you.

Four sheets from my NHL data analysis, including a zoomed-out table with conditional formatting to help me spot patterns, two pivot tables, and a good old bar chart.

I also experimented with Tableau, but I only ended up using it for one graph out of my ten. It’s an easy to use, powerful tool, but it only replaced Excel for me when I was dealing with geographical data.

2) Make your graph look good

Once I had an Excel graph that worked, I popped it into Sketch. The “Creating Line Charts” section of this article explains how to do that, but ignore the part about the PDF. That’s not necessary. Simply copy it out of Excel and paste it into Sketch.

This is where you can start to simplify and play with the layout. Think WWTD: What Would Tufte Do?

My Sketch file for my NHL graph. I decided to go with horizontal bars instead of columns, then removed unnecessary clutter, split out the two sets of data, squished them together, and fine-tuned it.

3) Share your graph

Yes, this is the scary part. But publishing your graph is worth it! Yes, people might call you out on your bullshit.

Me getting called out for my exaggeration. It’s true: I have no idea if most people actually think that. Oh well. Live and learn!

Yes, it’s scary to put yourself out there, but that’s how you get better!

4) Reflect on your journey

Done ten graphs? Congratulations! Now take a moment to reflect on the process. Here are some of my own reflections.

What an improvement!

I cringe when I look back at some of my previous work, even my language learning resources graphic from less than six months ago. It’s really ugly compared to my #10GraphChallenge.

And hopefully I’ll look back at these graphs six months from now and feel the same way. That’s how you know you’re learning!

Still really slow

When I started my #10GraphChallenge, I was thinking of doing one graph a day for ten days. It ended up taking more like 40 days. I’d estimate that each graph took an average of 3 hours. These things take time. And that’s okay. With more practice, I’ll get quicker.

That was fun!

I’ve always liked numbers and graphs, but I loved this challenge. Thinking of graph ideas then digging into the data and trying to tell a story made me feel like a journalist. Graphs are a great way to tell stories with numbers.

I’m not alone

There’s a whole community of data viz nerds like me out there. I stumbled upon Storytelling With Data during this challenge and found it to be an incredibly open, welcoming, and active community.

Your turn: Take the #10GraphChallenge

You’ve come this far, so why not try it out yourself? Here’s a template tweet to get you started.

Advertisements

Visualizing Fantasy Hockey Schedules

I have a new obsession. Fantasy hockey. The slot-machine-like dopamine hit when you get lucky mixed with the numbers-heavy analysis of trying to squeeze the most out of each week has really got me hooked.

So I thought I’d put all this analysis to use by practicing my visual display of quantitative data.

I’m about to go into fantasy hockey playoffs and I’ve been doing a bunch of number crunching, focusing on the schedules of various NHL teams. The idea is that if I pick up half-decent players who play a lot of games in a given week, they’ll score me more points than great players who have a bad schedule.

Two of my great players, Taylor Hall and Dustin Byfuglien, have been dealing with long-term injuries lately, so my only hope at winning is to maximize my games played.

To do that, I need to pick up players from teams who not only play the most games, but also play on quieter “off nights”. Here’s the logic I used.

  • Any day where 20 or more out of the NHL’s 31 teams play is a busy night.
  • Fewer than 20, I call an off night, because chances are, you won’t have too many benched players on those nights.

My favorite podcast, Fantasy Hockey Podcast, does a great job at highlighting the teams with the best and worst schedules each week, but I wanted to know well in advance and I wanted to see all the teams.

So I made this.

Schedule comparison charts- 2019 fantasy hockey playoffs

Starting with my league’s quarterfinals (March 4-10), I made a chart that breaks down every team’s schedule into off nights and busy nights.

Quarter-Finals

Fantasy hockey schedule analysis- March 4-10. 
ANA has 3 Off nights and 1 busy nights.
CGY has 3 Off nights and 1 busy nights.
FLA has 2 Off nights and 2 busy nights.
BOS has 1 Off nights and 3 busy nights.
DET has 1 Off nights and 3 busy nights.
LAK has 1 Off nights and 3 busy nights.
PIT has 1 Off nights and 3 busy nights.
WSH has 3 Off nights and 0 busy nights.
TOR has 2 Off nights and 1 busy nights.
VGK has 2 Off nights and 1 busy nights.
WPG has 2 Off nights and 1 busy nights.
BUF has 1 Off nights and 2 busy nights.
CAR has 1 Off nights and 2 busy nights.
EDM has 1 Off nights and 2 busy nights.
MIN has 1 Off nights and 2 busy nights.
MTL has 1 Off nights and 2 busy nights.
NJD has 1 Off nights and 2 busy nights.
STL has 1 Off nights and 2 busy nights.
VAN has 1 Off nights and 2 busy nights.
ARZ has 0 Off nights and 3 busy nights.
COL has 0 Off nights and 3 busy nights.
CBJ has 0 Off nights and 3 busy nights.
DAL has 0 Off nights and 3 busy nights.
NYI has 0 Off nights and 3 busy nights.
NYR has 0 Off nights and 3 busy nights.
OTT has 0 Off nights and 3 busy nights.
TBL has 0 Off nights and 3 busy nights.
PHI has 1 Off nights and 1 busy nights.
CHI has 0 Off nights and 2 busy nights.
NSH has 0 Off nights and 2 busy nights.
SJS has 0 Off nights and 2 busy nights.
NHL schedule analysis for March 4 to 10, 2019

As you can see in the chart above, Anaheim (ANA) and Calgary (CGY) have the best schedules, with 3 “off nights” and 1 “busy night” each. I’d better load up on Ducks and Flames!

Actually, sorry Anaheim, but you’re terrible. I’d better load up on Flames.

Teams like Chicago (CHI), Nashville (NAS), and San Jose (SJS) have the worst schedules, with 2 “busy nights” each and no “off nights”. That means that players from Calgary are at least twice as valuable as players from Chicago this week.

One thing that this chart doesn’t take into account is the strength of opponents or back-to-back games. I haven’t checked, but if both of Chicago’s games are against a terrible team like Anaheim who are tired because they’re on the second game in two nights, then maybe I shouldn’t completely write off Chicago players. Or if Calgary is playing only against top-tier teams, then maybe I shouldn’t jump right on them.

Semifinals

I made the same charts for Semifinals as well:

Fantasy hockey schedule analysis- March 11-17. NJD has 4 Off nights and 0 Busy nights.
ANA has 3 Off nights and 1 Busy nights.
CBJ has 3 Off nights and 1 Busy nights.
DAL has 3 Off nights and 1 Busy nights.
EDM has 3 Off nights and 1 Busy nights.
NYR has 3 Off nights and 1 Busy nights.
PHI has 3 Off nights and 1 Busy nights.
TOR has 3 Off nights and 1 Busy nights.
ARZ has 2 Off nights and 2 Busy nights.
BUF has 2 Off nights and 2 Busy nights.
MIN has 2 Off nights and 2 Busy nights.
NYI has 2 Off nights and 2 Busy nights.
PIT has 2 Off nights and 2 Busy nights.
SJS has 2 Off nights and 2 Busy nights.
STL has 2 Off nights and 2 Busy nights.
COL has 3 Off nights and 0 Busy nights.
VAN has 3 Off nights and 0 Busy nights.
CGY has 2 Off nights and 1 Busy nights.
CAR has 2 Off nights and 1 Busy nights.
CHI has 2 Off nights and 1 Busy nights.
BOS has 1 Off nights and 2 Busy nights.
DET has 1 Off nights and 2 Busy nights.
FLA has 1 Off nights and 2 Busy nights.
MTL has 1 Off nights and 2 Busy nights.
NSH has 1 Off nights and 2 Busy nights.
OTT has 1 Off nights and 2 Busy nights.
TBL has 1 Off nights and 2 Busy nights.
WSH has 1 Off nights and 2 Busy nights.
WPG has 1 Off nights and 2 Busy nights.
VGK has 2 Off nights and 0 Busy nights.
LAK has 0 Off nights and 2 Busy nights.
NHL schedule analysis for March 11 to 17, 2019

In the second week of March, my league’s semifinals, the New Jersey Devils (NJD) have the best schedule. Stay away from the LA Kings (LAK)! And the Ducks… even though they have the second-best schedule… because they’re the Ducks.

Finals

And here’s the same chart for the finals.

Fantasy hockey schedule analysis- March 18-24. VAN has 3 Off nights and 1 Busy nights.
WSH has 3 Off nights and 1 Busy nights.
ARZ has 2 Off nights and 2 Busy nights.
CHI has 2 Off nights and 2 Busy nights.
TBL has 2 Off nights and 2 Busy nights.
WPG has 2 Off nights and 2 Busy nights.
CAR has 1 Off nights and 3 Busy nights.
COL has 1 Off nights and 3 Busy nights.
MTL has 1 Off nights and 3 Busy nights.
NYI has 1 Off nights and 3 Busy nights.
PHI has 1 Off nights and 3 Busy nights.
ANA has 2 Off nights and 1 Busy nights.
SJS has 2 Off nights and 1 Busy nights.
CBJ has 1 Off nights and 2 Busy nights.
LAK has 1 Off nights and 2 Busy nights.
MIN has 1 Off nights and 2 Busy nights.
OTT has 1 Off nights and 2 Busy nights.
TOR has 1 Off nights and 2 Busy nights.
VGK has 1 Off nights and 2 Busy nights.
BOS has 0 Off nights and 3 Busy nights.
CGY has 0 Off nights and 3 Busy nights.
DAL has 0 Off nights and 3 Busy nights.
DET has 0 Off nights and 3 Busy nights.
EDM has 0 Off nights and 3 Busy nights.
FLA has 0 Off nights and 3 Busy nights.
NSH has 0 Off nights and 3 Busy nights.
NJD has 0 Off nights and 3 Busy nights.
PIT has 0 Off nights and 3 Busy nights.
STL has 0 Off nights and 3 Busy nights.
BUF has 1 Off nights and 1 Busy nights.
NYR has 0 Off nights and 2 Busy nights.
NHL schedule analysis for March 18 to 24, 2019

This week, try to stay away from the New York Rangers. The Vancouver Canucks and the Washington Capitals will treat you well.

Final three weeks combined

This felt less-useful for me because there isn’t as stark of a difference between the best and worst schedules, but I also created a chart for the final three weeks combined.

Fantasy hockey schedule analysis- March 4-24. ANA has 8 Off nights and 3 Busy nights.
ARZ has 4 Off nights and 7 Busy nights.
NYI has 3 Off nights and 8 Busy nights.
PIT has 3 Off nights and 8 Busy nights.
VAN has 7 Off nights and 3 Busy nights.
WSH has 7 Off nights and 3 Busy nights.
TOR has 6 Off nights and 4 Busy nights.
CGY has 5 Off nights and 5 Busy nights.
NJD has 5 Off nights and 5 Busy nights.
PHI has 5 Off nights and 5 Busy nights.
WPG has 5 Off nights and 5 Busy nights.
CAR has 4 Off nights and 6 Busy nights.
CBJ has 4 Off nights and 6 Busy nights.
COL has 4 Off nights and 6 Busy nights.
EDM has 4 Off nights and 6 Busy nights.
MIN has 4 Off nights and 6 Busy nights.
DAL has 3 Off nights and 7 Busy nights.
FLA has 3 Off nights and 7 Busy nights.
MTL has 3 Off nights and 7 Busy nights.
STL has 3 Off nights and 7 Busy nights.
TBL has 3 Off nights and 7 Busy nights.
BOS has 2 Off nights and 8 Busy nights.
DET has 2 Off nights and 8 Busy nights.
BUF has 4 Off nights and 5 Busy nights.
CHI has 4 Off nights and 5 Busy nights.
SJS has 4 Off nights and 5 Busy nights.
NYR has 3 Off nights and 6 Busy nights.
LAK has 2 Off nights and 7 Busy nights.
OTT has 2 Off nights and 7 Busy nights.
VGK has 5 Off nights and 3 Busy nights.
NSH has 1 Off nights and 7 Busy nights.
NHL schedule analysis for March 4 to 24, 2019

Once again, Anaheim comes up on top in terms of schedule. I’d still urge you to stay away from them because they’re Anaheim. Stay away from Nashville as well!

What do you think?

Fantasy hockey enthusiasts: Is this useful for you? What might make it more useful? Let me know in the comments!

Friends and family: You probably already knew I was a nerd, but not THIS big of a nerd. I’m sorry you had to find out this way. If you want to unfriend me, I understand.


Appendix: My process

I started by grabbing the NHL schedule in Google Sheets format then doing a bunch of formulas and conditional formatting.

Screenshot of a cluttered spreadsheet
Initial number crunching in Google sheets

I then got to sketching on paper, which helped me figure out what was important (total games, off nights, and busy nights) vs. what was just noise (the actual days of the week of games).

Photograph of a sketch on paper
My sketch was where I figured out that these charts needed to be sorted and simplified.

Then I messed around more in Google Sheets, calculating, sorting, slicing and dicing.

Google sheets spreadsheet showing color-coded schedules taking shape.
Here is where I debated between correlating the games to the days of the week and just showing the numbers.

After that, it was just a matter of playing with the chart configuration and styling.

Google sheets screenshot showing two versions of the same chart, as well as the background calculations
Here is where I decided that I didn’t need as many details on my “combined” chart.

As you can see in the above screenshot, I also used Sheets to generate alt text for my graphics. This means that even vision-impaired users will be able to read this blog post!

If I had more time, I’d shine up the charts by exporting them into Sketch and removing some of the non-essential visual elements. But I don’t!

Check out my latest posts

Liked what you saw here? I blog once a month on tech, User Experience, biking, and more! See some of my most-recent work below.

Killing your darlings

Last month I wrote about my process of designing what I called vesting sparklines. I was super excited about them because they packed so much information into a small area and because they made so much sense to me.

There is nothing like the moment when you suddenly come upon the answer to a design problem. Whether it is a particular interaction or the perfect design element, it is a moment of pure elation.

-Joshua Brewer, 52 weeks of UX

Testing my idea

When I showed a couple coworkers an early version, they were extremely confused. They wanted to understand but even with me there explaining it to them, it took a while. Even then, they didn’t seem to love it.

And these are patient, smart people, open to the idea.

Users are typically in a rush, distracted, and resistant to change.

But that’s okay, I thought, it’s just an early version.

Tweaking my idea

So I added a detailed modal to my prototype, so that if you click the sparkline you see a carefully labeled version of it with a table showing all the data below. Hover any piece of the chart and the appropriate table row lights up. Hover any row and the appropriate bar on the chart lights up.

Retesting my idea

Recently, another group of coworkers was discussing showing a timeline of events. I couldn’t contain my excitement so I called them over to my desk and showed them my sketch file with the table and the hover and everything.

It fell flat. Again.

Five brilliant people, all very knowledgeable in the world of equity compensation, didn’t understand it. So I explained. And explained. And it still wasn’t clear.

Example chart of price vs. quantity for upcoming equity vests

Part of my “improved” design: simple, right? Wrong!

Then a coworker asked “What pain point is this solving?”

Oh. Yeah. That.

The problem with my idea

My problem with this idea was that it wasn’t directly addressing a known user need. It was just an exercise I came up with based on the Tufte book I read.

They say when the only tool you know how to use is a hammer, everything looks like a nail. I was wielding my Tufte hammer and swinging it all around, not realizing that there were no nails sticking out.

Another lesson here is that even designers are guilty of self design. I’ve always been an Excel nerd, in love with spreadsheets and data and graphs. Most normal people aren’t. So while the sparklines I designed may have been perfect for me, they were utterly baffling for most other people.

Killing my idea

It’s hard to do, but as a designer, sometimes you need to kill your darlings.

So goodbye vesting sparklines. It was nice knowing you.

On the bright side

While designing this, I taught myself how to get API responses from the Chrome inspector, turn that json into csv, and play with it in Excel. This has already come in handy in a real work situation when we wanted to dig into the responses of the API when testing some recent work.

Also, I enjoyed the process of creating this design. It was truly eye-opening to test the it and see what people thought about it. Those tests didn’t go as planned, but that’s why we test!

Fall out of love with your ideas and fall in love with your process.

Chirryl-Lee Ryan

Visualizing vesting schedules

I recently wrote about the book The Visual Display of Quantitative Information by Edward Tufte.

That book inspired me to explore ways of visualizing the vesting of savings and awards.

Background

Skip this section if you know equity!

Vesting

Vesting is when stock or cash becomes available. This allows companies to reward their employees for staying with them for a long time. Savings plan matching and stock options are two examples of

Savings plan matching

Savings plan matching encourages employees to save for their future. For every dollar an employee saves, the company will contribute a certain amount. This happens every paycheck. That company contribution is often subject to vesting. In other words:

Dear employee, you saved $1. Good job. You can have this quarter… but only if you are still working here one year from now.

Stock options

Stock options freeze the price of a certain number of shares for employees, who can then buy them a few years later. It’s like:

Dear employee, the stock price today is $30. If you’re still working for us in two years you can buy 200 shares for that price. In three years you can buy 100 more. And in four years 100 more!

Why?

This promise of future money is a win-win. It helps the employee because they get rewarded. It benefits the company because employees are owners too and are less likely to leave. Some people call it “the golden handcuffs”; I like to think of it as a carrot on a stick. There’s always some money just out of reach, which encourages employees to stay.

Résultats de recherche d'images pour « bugs bunny carrot on a string »

Kind of like Bugs Bunny motivating himself with a carrot on a stick

My process

Vesting and employee equity can be hard to explain but once you get it, you get it. I’ve spent a lot of time lately exploring ways of representing equity visually.

I have done a ton of sketching. And thinking. And sketching again. It’s funny how ideas in your head can seem perfect but their flaws are revealed when the pen hits paper.

Initially I explored the idea of plotting time vs quantity of upcoming vest events.

That didn’t always work because there are often large gaps between vest events. So I decided to order the vest events by date instead of scaling by date.

Here are some of my sketches.

IMG_2356-COLLAGE

A collection of sketches. Spot the coffee stain!

I settled on a sparkline showing the quantity of vest, the award price, and the market price. What I like about this is that the area of each shape is proportional to its value. It explains complex concepts like stock options vs. RSUs at a glance.

I’ll illustrate this with an example. For a fictional employee with a few savings plan contributions and a recent stock option grant, the raw data might look something like this:

Type Vest Date Quantity Grant Price Current Market Price Estimated Value
Savings plan 01-Aug-19 10 $0 $103.30 $1,033.00
Savings plan 15-Aug-19 11 $0 $103.30 $1,136.30
Savings plan 01-Sep-19 12 $0 $103.30 $1,239.60
Savings plan 15-Sep-19 11 $0 $103.30 $1,136.30
Savings plan 01-Oct-19 9 $0 $103.30 $929.70
Savings plan 15-Oct-19 8 $0 $103.30 $826.40
Stock option 28-Sep-20 50 $114.23 $103.30 -$546.50
Stock option 28-Sep-21 25 $114.23 $103.30 -$273.25
Stock option 28-Sep-22 25 $114.23 $103.30 -$273.25

There’s a lot to digest here. And this is a simple example. For many employees, we have to limit the number of vests that we show because there are too many. But it becomes much more visual and compact if we represent it using what I like to call a vesting sparkline.

vesting sketch

A vesting sparkline for the data in the above table. Note the savings plan vests on the left and the (underwater) stock option vests on the right.

What I love about this is that it reduces all the complexity with grant prices and vesting timing into simple geometry!

The area of each box is proportional to its value. The savings plan vests are narrower because they’re smaller, but their $0 grant price makes them quite valuable. The option vests are currently underwater, meaning their grant price is higher than the market price. But if the price jumps, they’ll be much more valuable than the savings plan vests.

I think this idea has potential.

Or am I crazy?

I’ve obsessed over these sparklines on and off for a month. I’m way too close to them to be objective. So, readers, please let me know if this idea sucks!

And more importantly, I need to try these charts out with real data. What will it look like for typical Australian employees? What about German executives?

If I’m satisfied that I can cover all cases with the design, I’ll then test prototypes with coworkers and real customers. Do they understand what they’re looking at? How can I tweak the design to help?

I’m hoping that this will make it into production but even if it doesn’t at least I had fun doing it!

The Visual Display of Quantitative Information by Edward Tufte- Book Review

“A little light reading, hey?” the doctor from Pennsylvania asked me on a recent flight. “Do you have to read that for a course or something?”

“No,” I said as I showed him a fascinating chart of Napoleon’s army’s advance to and retreat from Russia, “I’m actually just reading it for fun.”

And despite the fact that the cover looks like required reading for a 1960’s advanced course in Macroeconomics, it WAS fun.

The book

Even the cover is fascinating. The graph on it looks like a meaningless jumble of lines, but it actually contains the entire train schedule of France from 1885. It is so rich in information and so elegant. It’s a thing of beauty.

IMG_2152.JPG

The beautiful cover of the book

The book goes on to highlight many amazing graphs, as well as a few counter-examples, and explains what makes them good or bad.

It all boils down to just a few principles. The ones that stuck with me were:

  • Don’t waste “ink” on unnecessary or distracting “chartjunk”,
  • don’t use a chart when a table will do, and
  • don’t lie.

An example of wasted ink included using internal grid lines, which often reduce the readability of the actual data. This should be avoided.

As for using charts vs. tables, the “magic number” that Tufte gave was 20. If there are fewer than 20 pieces of data, it’s often better to print those values directly in a table than for to abstract them into a chart.

The book contained several examples of charts that lie. The biggest offense was shifting axes for some or all of the data in a chart to make the data seem better or worse than it actually is. Tufte also recommended adjusting monetary values for inflation whenever possible.

Applying these ideas

I work as a UX designer for Solium, an equity compensation software company. What does that mean in English? Many companies reward their employees by giving them ownership through things like stock options and savings plans. Solium makes software that helps those companies keep track of these plans.

We recently released a redesigned interface for these employees (participants). These participants have appreciated the new interface, though there are still a few important questions that it doesn’t fully answer for them. One of which is “When am I going to get my money?” because these equity compensation programs usually have what’s called vesting, where rewards are only released after the recipient has worked for the company for a certain amount of time, usually 1-4 years.

I’m now working on a simple, compact, easy-to-learn chart that shows the vesting schedule for a participant. It may never end up being released in our software, but it’s definitely been a fun exercise exploring different concepts based on what Tufte taught me!

IMG_2154

Some of my sketches for vesting schedule visualizations

For details on these charts, see Visualizing vesting schedules.

Definitely worth a read!

Anyway, The Visual Design of Quantitative Information was a great read. I’d definitely recommend it if you work with data or are curious about how these things work… Or if you want to impress that doctor sitting next to you on a flight.