So 3 years ago I took Megan out on a date…

So 3 years ago yesterday I took Megan out on a date and it quickly turned into a classic robby-comedy-of-errors. We went to get pizza, and for some reason it seemed like a good idea to get the super spicy BBQ tofu pizza, even though I know Megan doesn’t really like spicy foods. But it’d be fun to try, right? I wish I could say it was delicious, but it turned out that it was just, er, mean. She indulged me and went along with it, and when it finally came out it was brutally hot. WAY too spicy for either one of us. So that was dinner, picking around the edges of some food that was essentially torture.

Then it got even worse. Instead of doing some normal date stuff like seeing a movie, I took her to climb a mountain. Yup. A mountain. “It’ll be fun! How often do you get a chance to climb a mountain?” Even though, as far as mountains go, this one was pretty manageable, it was still a pretty big hike, with some dicey spots towards the top. Again, Megan was a good sport about it and went along. So here I am going up this mountain, thinking I’ve got this grand adventure planned, and I’m so pleased with myself that I don’t notice Megan being less and less ok with the idea. It’s getting late. The trail is getting steeper and rockier, and to top it all off, it’s summer solstice so there’s tons of people up there with us. This isn’t a quiet romantic nature moment. There’s people running around everywhere being crazy. Normally, not a big deal, but when you’re hikeing up a tiny, loose-gravelly, still-snowy-in-june, increasingly steep trail, it’s a little unnerving. On top of that, these weren’t people I was particularly psyched about sharing a romantic evening with. After the guy with the devil sticks and the oversized Mastercard parody shirt reading “MasterPimp” (classy) blew by us for the third time, I was finally starting to question my date-planning skills.

Unfortunately, the last 5% of it is a near vertical uphill scramble. I had done it a couple times before, but it’s definitely scary if it’s your first time, under any circumstances, let alone the near-carinval atmosphere of summer solstice in Alaska.

But the top is so close! And this will all be worth it, right? Well, we never made it.

Right about that point, a family is coming down the same way we were going up. They have three dogs that are just loving the rocks. They’re bouncing all around us, knocking stuff loose, sending rocks tumbling down around us (which are honestly probably pretty small but in the moment it seemed like several mini avalanches). While that’s going on, I look up and see a kid leap of some rocks about 100 feet above us, falling about 20 feet, then landing in one of the few remaining snow banks on the mountain and sliding down for another couple hundred feet, skidding in between jagged boulders the whole way. The whole thing took about 5 seconds. I was pretty sure I was watching someone making a terrible, Darwin-Award-worthy mistake. Turns out, it was all intentional, and he jumped right back up, ready to run back up and do it again.

It was right around that point where I looked back and saw Megan trembling, frozen, with tears rolling down her face. She had reached her limit, and couldn’t take another step. I tried to talk her through it. “There’s only 100 feet more to the top!”, “I promise it will all be worth it once we get up there!”, “You’re halfway up the bad part, so going down is going to be just as scary as going up!”. In retrospect, that last part was a pretty shitty way to phrase it. But at this point, I had sent Megan into a full on panic attack, and I felt terrible. After a few minutes of talking, it became clear there was only one option, we needed to get off this trail, away from all these people, away from these dogs that are weaving through our feet. And we needed to do it IMMEDIATELY. We took it step-by-step, and within about ten minutes or so we were back off the really scary part. Luckily, there was a little, mellow ridge nearby that was just far enough away from the constant flow of people. We made our way up to it and were able to catch our breath. Turns out, it ended up having just about as good of a few as the top of the mountain, minus all summer solstice revelry. It was great. Here’s a picture:

Flat Top Mountain

So here I am. It’s midnight. We’re on top of a mountain in Anchorage, AK. I’ve just gastronomically, physically, and emotionally scarred my girlfriend. Somehow, she’s put up with it all (although at this point I’m unsure how much of it is good will, and how much is fear that if she left me she wouldn’t find her way back down the mountain). After all that, despite all that, I still had one more thing I had to pile on the evening. I set up the camera to take a picture, flipped it on to video instead and let it roll.

“Hey dummy, the light’s not blinking. You didn’t set the timer… It’s not going to take the picture…”

Smashvillians.com. A little project I’ve been working on.

Lately there are a few things I haven’t gotten to do quite as much as I’d like:

  • Design
  • Code with Ruby
  • Go to hockey games

In an attempt to deal with all three at once, I’ve been messing around with building smashvillians.com, a fan-content aggregator for my favorite NHL team, The Nashville Predators. It gave me a chance to dig into Rails 3 (which I’ve learned that I really like). It’s also a fun opportunity to play around, UX-wise, with content aggregation and curation. There’s a few concepts in that area that I think are really interesting and I’m looking forward to doing some more stuff with. Also, I get to really nerd out about the Preds, and when I’m done actually have something to show for it.

smashvillians-crop.jpg

Reflecting on recruiting.com

Last Friday was my last day at Recruiting.com. Although I’m extremely excited about the new job I’m moving on to, I find myself looking back on the last four years with a lot of fondness. I figured I’d get all nostalgic and reflect for a bit. It was a fantastic experience that I’ve grown tremendously from.

I met the most awesome people:

So many amazing people have cycled through that place during my time there. My mind was constantly being blown by how much talent I was sitting right in the middle of. It was a fantastic learning experience. Whenever I talk to other people in the Seattle tech scene, they all bring up how many smart people that place churned out. Hopefully I don’t bring the reputation down too much!

In addition to being smart and amazingly talented, a lot of them were just plain awesome. I have some amazing friendships with ex-Jobster’s. One of them even introduced me to my girlfriend who I just got engaged to, so the whole experience was worth it just for that alone.

I learned what a start-up feels like, for better or worse:

Three weeks after Jobster hired me (and moved me out to Seattle from Boston) we laid off 70 people. That blew my mind, and made me wonder what I had gotten myself into. I saw scrambling business models, pressure from VCs, more layoffs, bad press, worse press, god-awful press, and a slow steady attrition by the survivors of layoffs.

I also saw people who believed so much in what they were doing and loved coming to work because of the impact they felt they could make. I saw a culture where it was expected that you’d question everything and challenge your assumptions constantly. It was somehow pulled off in a way where pretty much everyone grew from it. We learned what worked, and what didn’t. More importantly, I learned that it was possible to do something about it when things weren’t working. I had multiple “holy shit!” moments where we realized we had just stumbled onto something awesome in a way that no one else had thought of, and we could build things, and they’d solve people’s problems in a real, meaningful way.

I built something I was proud of, and learned how to do it in a WAY I was proud of:

Things floundered for a while the first couple years that I was there, but in the last 18 months, we really nailed down a strong opinion about what we were there to do for people. We had a really clear objective and we stuck to it, even when it wasn’t easy to do so. We had lots of really passionate arguments about whether this feature or that feature complimented or distracted from the core vision. We watched things that we built and felt really good about completely fail in user-studies, but we learned to do it quickly enough that it ended up becoming a good thing when it happened. I learned how to get deeper into the heads of people that I was trying to help (something that was particularly hard for me since I had never met a recruiter in my life before starting there). The deeper I got into it, the more exciting it became.

I learned that I really like doing this shit, after all

Building software is fun. I thought it would be at first, but I wasn’t so sure about it during the first couple years out here. I thought maybe I had an idealized vision of it that was really far from reality. It sounded good on paper, but I got to thinking that maybe it’s all just a lot of hard work that ultimately leaves you spending years on a single product that you weren’t all that passionate about to begin with. I’m glad it all came full-circle. It could’ve EASILY ended up different.

Anyone who’s at all familiar with the Jobster saga knows that a lot of craziness went down over the years. But now that it’s all behind me, none of that stuff really matters. It makes for some amusing memories, but what’s really important to me is that I got to work with awesome people, build something awesome, and do it in a way that I feel really good about. I even made a few recruiters’ lives a teeny bit better in the process. :) I have a much better sense of myself and what I find fulfilling as a result of it, and I can’t wait to take the things I’ve learned to the next level.

Successful infographic: World Cup matches by Michael Deal

I feel like there are WAY too many infographics that fall down because they pack way too much data into the presentation. The ones that succeed tend to pick a single data-point (or a very small set of related data points), and use it to illustrate a single concept. It’s so tempting to try to show off everything you learned from the data-set, but it can also get overwhelming, really quick. It’s an easy trap to fall into, especially for the infographic designer that probably enjoys getting completely lost in data.

Over the weekend, I came across this visualization by designer Michael Deal, which I think is fantastic. He explores the matches in the World Cup by visualizing passes, shots on goal, and goals scored across an entire game. It’s a lot of information, but it’s insanely digestible. I’m an utter noob when it comes to soccer, and I’m kind of frustrated that I don’t have my head wrapped around the game enough to enjoy watching it. But by spending just a couple minutes with this visualization, I can see a picture of the games that not only makes sense to me, it makes me want to learn more.

For example: (click the images for the full infographic)
spain-switzerland-1.jpg
This must have been a really frustrating game for Spain. They dominated on passes and shots for the entire game, but Switzerland ended up taking the match.

italy-newzealand-1.jpg
This shows how Italy was dominant in the game in a way that the 1-1 tie doesn’t illustrate.

Michael has some other awesome infographics on his site.

Visualizing Lord Stanley’s Cup: an HTML5 experiment.

stanley-cup-experiment2.jpg
Here’s a little something I whipped up over the past week. It’s an interactive visualization of the winners and losers of the Stanley Cup finals since 1927. I was trying to accomplish two things: 1. learn how to use some new stuff in HTML5 (canvas, css transistions, etc), and 2. teach myself a little bit about hockey. I’m pretty psyched at how it turned out.

Click here to see it.

By the way, Internet Explorer completely barfs on this, so it’s really only worth looking at if you’re using Chrome, Safari, or Firefox.

How I did it

1. Start with simple HTML markup.

It seemed like the right way to start was to put all the data into something simple that would display fine on it’s own, in any browser, then transform it into something more interesting with javascript and css. I came up with a simple HTML structure that showed the wins and losses for each team, and allowed for some notes for context.

<section id="sc-timeline">
  <ul id="timeline-data">
    <li id="calgary">
      <h3 class="team-name">Calgary Flames</h3>
      <div class="timeline">
        <h4>Stanley Cup Wins:</h4>
        <span class="win" title="1989/05/30">1989</span>,

        <h4>Stanley Cup Losses:</h4>
        <span class="lose" title="1986/05/30">1986</span>,
        <span class="lose" title="2004/05/30">2004</span>

        <h4>Notes:</h4>
        <span class="note" title="1972/10/01">Founded in 1972</span>
      </div>
    </li>
  </ul>
</section>

… then repeat the list-items for each team in the data set.

2. Build a timeline with Javascript.

Now that the raw data is on the page, I need to add some stuff to it so it will actually be interesting. I stored all the javascript to control the visualization in an class called ‘timeline’

var timeline = function() {
  this.init = function(el) { ... setup stuff goes here ... }
  ... more logic goes here ...
}

Then I created an instance of the class, and run an initialize function that adds in the extra HTML we need for the visualization.

var sc_timeline = new timeline();
sc_timeline.init($('SECTION#sc-timeline'));

Rather than paste in all the code here, which would be overwhelming, have a look at the source.

In the init function, three bits of extra markup are added to the existing html, so the structure now looks like this:

<section style="width: 1010px;">
  <ul id="timeline-data">
    <li>...</li>
  </ul>

  <!-- this stuff below is added by the timeline.init() function. -->
  <canvas class="timeline-canvas" height="270" width="1010">
  <ul class="timeline-bar">
    <li>1927</li>
    <li>1928</li>
    ... etc.
  </ul>
  <div class="timeline-titles"></div>
  <div class="timeline-notes"></div>
<section>

All of that is super easy with jQuery.

3. Add some CSS

Now, all the markup is there, but it’s pretty ugly. In a CSS file, I floated all the list items so they displayed horizontally, hid the raw data (wins, losses, notes), positioned the new timeline-title and timeline-notes DIVs on top of the CANVAS element, and added team logos to each LI in the timeline-data list (using the team_logo_nav.jpg sprite)

check out the css file.

It’s all really straightforward CSS, but there’s one thing I want to point out. When you hover over the team logo, I used a CSS transition to give some animation to the background position. It’s the first time I’ve ever used that, and I like it a lot. I can imagine some really cool stuff that can be done with it. (too bad it only works in Safari and Chrome, currently)

-webkit-transition: background-position 0.3s linear;

4. Add interactivity

There are two bits of interactivity I want on this thing. First, you should be able to mouse over the team logos and display the years they were in the finals, along with any notes. Second, and inversely, you should be able to mouse over the years in the timeline and see which teams played on any given year.

In the timeline setup, I attach the actions to the list items:

this.setup_timeline_actions = function() {
  public_instance = this.public_instance; // this is a reference to this instance that we can attach to HTML elements that need to refer back to it.
  this.teams.find('LI').hover(function() {
    public_instance.draw_timeline_links(this);
  });
  this.years.find('LI').hover(function() {
    public_instance.draw_matchup(this);
  });
}

I won’t go through the ins and outs of how I did the highlighting of the corresponding list items. It’s basically finding the matching years or teams by filtering the list for an ID or title attribute, then adding a ‘selected’ class to them and writing the team name to the timeline-titles DIV element.

Oh, and then I got to the fun part…

5. Drawing with CANVAS.

I think the most interesting part of the visualization is the bars that link the teams to their win or loss years. I did it with the HTML5 CANVAS element, which is basically a scriptable image tag that you draw on programmatically. It’s not difficult, but it’s way different than basic DOM scripting like I’m used to.

To make it work the way I wanted, I sized the canvas to be exactly as wide as the list items. Then I could easily to draw links between the two rows, just by finding how far the corresponding elements were from the left edge.

this.draw_connection = function(team,year,color) {
  // this.ctx() is a reference to the context object of the canvas. 
  this.ctx().globalAlpha = 0.2;  
  this.ctx().fillStyle = color;

  // get the coordinates
  var l1 = team.position().left;
  var l2 = year.position().left
  var r1 = l1 + team.width();
  var r2 = year.width() + year.position().left;
  var h = $(this.stage.canvas).height();

  // draw the connection
  this.ctx().beginPath();
  this.ctx().moveTo(l1,0);
  this.ctx().lineTo(r1,0);
  this.ctx().lineTo(r2,h);  
  this.ctx().lineTo(l2,h);
  this.ctx().fill();
}

When I loop through all the teams and draw their connections, with blue bars for wins, and red bars for losses, it creates a pretty neat effect:
stanley-cup-graphic.jpg

Drawing notes is pretty simlar, I drew a line on the canvas, then positioned the note text on top of it, left-aligned to the line:

var year_pos = this.stage.years.find('LI#y' + year).position().left;
var h = $(this.stage.canvas).height();
this.ctx().strokeStyle = '#00ff00';
this.ctx().globalAlpha = 1;
this.ctx().beginPath();
this.ctx().moveTo(year_pos, 0);
this.ctx().lineTo(year_pos,h);
this.ctx().stroke();
this.stage.notes.append('
‘+ note.note + ‘
');

Creating a note layout that looks like:
stanley-cup-notes.jpg

From there, it’s just a matter of clearing the canvas whenever a year or team is hovered, then drawing the connections all over again, but just with the selected year.

Again, here’s the finished product. View the source to see the details of the javascript.

Learn more about working with the CANVAS tag.

Learn more about CSS transitions.

Update: The guys at FanSnap had me build a timeline for the NBA finals. I made some design refinements with this one and made it work in IE. By “made it work in IE”, I mean “made myself feel really dirty while making it look only halfway-passable in IE”.

Infographic: Epic US Floods in the last 100 years, Damages and Casualties

I’ve been thinking about floods a lot lately. A few weeks ago my hometown, Nashville, TN was hit with the worst flooding it’s had in at least 80 years. Seeing all the images of the damage was pretty mind-blowing. I’m still having a hard time wrapping my head around the extent of it all.

To make at least a little sense of it, I started diving into as much of the raw data as I could find. In the process, I realized a sad truth about floods. It’s really easy to underestimate how big of a deal they are, provided they don’t happen near to a place you have a particular attachment to. In the past decade, there have been a few floods that were at least as destructive as the Tennessee floods, but I don’t really remember them. Or, I do remember them, but didn’t think they were that big of a deal. Just a whole lot of rain. Add that to the fact that the Tennessee floods went down on a weekend where there was an environmental crisis, and a failed terrorist attack in NYC, and it’s easy to see how the severity of the situation was lost on a lot of people outside of the South.

Here’s an infographic I pulled together exploring the damages and lives lost in several of the largest floods over the past 100 years. Click through for a larger version.

Infographic: Epic US Floods throughout history

And please, if you’re feeling at all generous, there’s a lot of folks in Nashville that could use a hand. Consider making a donation, buying something, or if you’re in the area, take a little time to help out. Thanks.

There’s no wrong way to eat dessert…

A few months ago, I wrote a clunky blog post about my thoughts on user-experience design as participatory storytelling. It felt pretty corny, and I don’t think it fully got across the core of what I was trying to say. Today, I saw an article in The Stranger about Dana Cree, the pastry chef at Poppy, here in Seattle. She’s insanely talented at what she does (I’ve eaten there, the desserts are ridiculously good). The whole article is great, but at the end there’s a quote that I think is a pretty eloquent illustration of what I was trying to get at when I said user-experience design is about setting the stage for a person to create their own personal story.

…Then I ask her, considering all the love and purposefulness that goes into creating each platter, if there is a specific way to eat Poppy’s dessert thali to get the most out of it.

“No, there’s never a wrong way to eat it,” she exclaims with a smile. “The human element is fascinating. I can send the same dessert to five different people, and it will become five different desserts. My goal is that it tastes like the best version of what you expect.”

In this case, she just happens to be talking about wonderful, wonderful desserts instead of software design. :) read the rest at thestranger.com

Getting data for a visualization design with Nokogiri, mysql, and R

I recently did some analysis of my Last.fm listening history to figure out what my ideal rainy fall mix would be (see final list here). It was fun, and I learned a couple cool things in the process.

Step one, Get the data:

First things first, I needed to get a list of all the songs I’ve ever scrobbled on Last.fm, and some historical weather data to mash it up with.

Last.fm gives you some fantastic data feeds, but there’s no way to export your entire listening history. And for all the weather sites out there, I couldn’t track down a single one that would give you historical data in a structured format (like JSON or even CSV).

However, both Last.fm and Weather Underground had an HTML interface for browsing the data I wanted, page-by-page, in small pieces.

The thought of writing a scraper for these sites seemed pretty daunting, but it actually turned out to be REALLY easy. Using this post as a guide, I wrote a couple of small Ruby scripts using Nokogiri and FasterCSV to scrape the pages and save the relevant data to a .csv file.

disclaimer: this code isn’t pretty, by any means, but it was easy and it worked.

See the scraper for Last.fm

See the scraper for Weather Underground

Once I had those written, I could just do this in an IRB sesion:

> require 'LastFM'
> require 'WeatherData'
> LastFM.get_tracks
> WeatherData.get_weather

All in all, it took me about 45 minutes to wrap my head around Nokogiri and hack together something that got the data I wanted from both sites. Not too bad. Way easier than I expected it to be, anyway.

STEP TWO: Get rid of the sunny good-weather stuff

Now, I needed to filter it, so I dumped both csv files into mysql and ran this query. I think it’s pretty self explanatory:

SELECT s.artist, s.song, w.conditions FROM songs s JOIN weather w ON w.date = s.date WHERE w.conditions IN('Rain','Partly Cloudy','Scattered Clouds','Snow','Overcast','Fog','Mostly Cloudy') AND MONTH(s.date) IN(9,10,11,12)')

Now, I’ve got over 9,000 songs that I listened to between September and December, when it was overcast, raining, or snowing.

STEP THREE: Visualize

I could’ve done all the analysis with mysql queries, but I know this will probably turn into some sort of visual exploration on the mixtape jacket design, so I exported the results to a CSV and brought them into R.

From there, it was pretty easy to get to what I wanted, the top artists I listed to on rainy days.

fall_song_data = read.table('~/fall-rainy-songs.csv', header= TRUE, sep="\t")
fall_artist_counts <- table(fall_song_data$artist)
pie(fall_artist_counts[1:30])

The first pass at visualizing my fall bands

Not super pretty at this point, but interesting. Also, relieving. I can actually make, in my opinion, a pretty damn good fall mix out of these bands.

There were all sorts of other neat facts I was able to pull out of this data, but this gives a general idea at how easy it was to get the data and do something with it.

My perfect mix for a rainy fall day (statistically speaking)

fall-jams-cover.jpg

The November theme for Rain City Mix Tape Club is Rainy fall jams. It’s a good theme, there’s lots of songs that just scream out to be listened to on an overcast fall day (especially here in the northwest).

I thought it might be neat to take a more data-driven approach to this mix than usual. I have 3+ years of my music listening data on Last.fm, so I *should* be able to say, quantitatively, what my ultimate rainy fall jams are, based on what I was actually listening to, on rainy days in the fall. The really interesting bit would be whether or not that matched up at all with what I would subjectively choose to put on a rainy fall jams mix.

For a nerdy technical breakdown of how I did it, check out this post.

I was originally just going to take the 15 songs that I listened to the most on overcast or rainy days between September and December. As it turns out, 9 of them were by the same band, because I tend to get obsessive about certain albums.

So instead, I decided the best way to represent the data in a single mix, while still giving it some variety, was to take the most listened-to song by each of the 15 bands I listened to the most during Autumn, under those weather conditions. There were a couple surprises, but for the most part I’m pretty pleased that it actually turned into a fairly listenable mix.

Here’s how it ended up:

I tried to link directly to the song, where possible. Last.fm didn’t have a streaming version of all of them, though.

  1. Yo, Get Into It, by Latterman

    I wouldn’t have guessed this would be my top song on rainy fall days. But it turns out, during cold, rainy weather, I listen to this band way more than anything else. I guess bleak fall days call for an anthemic pop-punk pick-me-up.

  2. Radio, by Alkaline Trio

    This one makes a lot more sense. I’m not a big fan of fall so it makes sense that bleak, depressing songs with a healthy sprinkling of “go f**k yourself” seem just about perfect.

  3. Cry of the Black Birds, by Amon Amarth

    Thor FTW! If I were a viking, I’d do most of my pillaging and plundering between Labor Day and Christmas.

  4. Across the Shields by Torche

    Poppy metal is a great counterpoint to weeks of non-stop drizzle.

  5. Better Half, by Jawbreaker

    I was a little surprised that this song scored this high, but Jawbreaker was one of my favorite bands in High School, and cold autumn days make me nostalgic, so I guess it makes sense.

  6. Thousand Scars by Envy

    I can see Elliot Bay from my office window, and this song + the rain + the cargo ships sailing past = awesome. I can’t really explain it. There’s just something about it all that looks / sounds rad.

  7. Rodeo Clown, by Lifetime

    Not an obvious fall song, but I listen to this band a lot year-round. Chances are, it would also be on my Winter, Spring and Summer jams mixes, too.

  8. We’re so Small, by The Epoxies

    Another one filed under “poppy new wave antidote for gloomy weather.”

  9. Flights End, by Burst

    Honestly, I don’t even like this band that much. I have no clue how they ended up ranking so high. I guess I just subconsciously gravitate towards Swedish metal bands in the fall?

  10. Shadows, by Sinking Ships

    I can’t really put my finger on it, but something about this song seems totally appropriate for this mix, even though it’s not terribly obvious.

  11. Spit Shine Your Black Clouds, by The Blood Brothers

    The darkness and weirdness of this song (this whole album, actually) makes a great compliment to those days when you’re going just a tad bit crazy because you haven’t seen the sun in weeks.

  12. On the Nod, by Avail

    Like the Lifetime song above, this one is on here because I listened to this band all. the. damn. time.

  13. Train Wreck Love, by Stabbed By Words

    This one was a complete surprise. I think this song is pretty stupid, actually. But, it’s catchy. The rest of this album is much better.

  14. Chips Ahoy!, by The Hold Steady

    Sometimes you need to feel happy, that’s what The Hold Steady is for.

  15. David Comes to Life, by Fucked Up

    This band reminds me that however insane I get while cooped up in the rain all winter, there’s a fat, hairy, mostly naked Canadian man who’s much, much worse.

Here’s how the packaging turned out:
Rain City Mix Tape Club for November