My wife’s been watching a lot of NASCAR lately, and I’m actually finding it quite interesting, in spite of my prior reservations. More importantly to the geek in me, though, NASCAR is a treasure trove of data just waiting to be viewed, and from the look of their leaderboard, this can be a painful task. So, I set out with my newly-acquired knowledge of the sport (hey, it’s no less a sport than horse racing) to identify the key interesting aspects of a race and figure out how they could be viewed more easily.
To start, I realized there are really two different aspects of a race to look at: the race itself and the status of its drivers. The obvious overall race status is the current lap, especially as it relates to the overall number of laps. If it’s on lap 250 out of a total 500, it’d be nice to see a bar at 50% width. This is right up Wilson Miner’s alley, so I used his technique to the letter, establishing a page-wide single-bar chart, placed right behind the race’s title and current lap number. It’s easy to see what lap you’re on and also how the current status relates to the overall race.
But there’s more to it than that. If you’re showing a bar for the race’s progress, that bar essentially represents the history of the race thus far. Showing a drab, gray bar makes sense if you don’t know anything more than the fact that those laps occurred, but we do know more than that. The race is constantly being run under one of several flags, each denoting a particular driving condition. Green is the default, when everything’s going fine; yellow is a caution caused by a variety of things, including crashes; red is a complete stoppage due to extensive cleanup or weather; white denotes the last lap; and checkered marks the completion of the race.
The white and checkered flags are special cases taht always occur at the end of a race, so those didn’t make much sense to visualize. Besides, the background is already white, so it’d look like a gap in the bar, and the closest I could get to a checkered bar is a dotted or dashed bar, which wouldn’t be self-explanatory. So those two didn’t make the cut, but the other three flags are very important and can be shown throughout the race. So I colored the default bar green for the standard status and added yellow and red bars where appropriate. These work just like the green bar, only they also have a
left property provided inline, along with their
width. Actually, since a red flag doesn’t actually count as even part of a lap (since cars aren’t moving), that doesn’t have an inline width at all, just a small width set in the stylesheet. The actual markup uses an ordered list with text to describe the caution history, very similarly to the current NASCAR leaderboard, so non-visual browsers still get the pertinent information.
I was a little worried about the colors at first. Experts in the accessibility field are quick to point out the issues posed by color blindness, affecting as many as 5% of men. Since men are the primary audience of NASCAR and red-green color blindness is the most common, I feared that red flags wouldn’t be visible enough. To address this (and I only hope it works, I can’t test it myself), I muted the green and yellow used for most of the race, while leaving the red at full intensity. Hopefully the difference in brightness will be evident to those who can’t distinguish the colors. This also helped readability for everybody, because it gives higher contrast to the text placed on top of it.
For the drivers, I identified a few obvious components that needed to be placed in the table: rank, driver name and car number. I seriously waffled on car number, because I didn’t want it getting confused with the rank, but ultimately I caved because many people know the car numbers better than the driver names. Plus, when looking at a race, you may see a car do something interesting or upsetting, and you may want to know who the driver is, so adding that info helps. Thankfully, NASCAR provides little icons of each driver number that correspond to the artwork on the car, which both makes it easier to identify the car number and adequately distinguishes it from any other numbers surrounding it.
Then, the data got more interesting. The data feed provided by NASCAR (no, it’s not really an API, but they use Ajax to update their leaderboard, so there’s a pipe-delimited data file available) contains current position, starting position, current and best lap times, current and best speeds, current lap (since drivers can fall several laps behind), time behind the leader, car manufacturer, primary sponsor and a few others. That’s a lot of information to go through, so I had to prune.
NASCAR’s own leaderboard shows speed, but the data feed isn’t updated nearly often enough to make that of any real use. It also shows lap times, but it seems to me that the time behind the leader is a far more important metric. Even if you combined the current lap and the lap time for your favorite driver, you still wouldn’t have enough information to know how far they are from the lead. It might be nice to see if they’re going faster than the leader (catching up), but space is limited, and it’d get a bit confusing with the other charts that did get included, so that got shelved for now.
Throwing in the number of laps led was an easy choice, because drivers also earn points for a season-long tournament. Points are based partly on rank at the end of the race and partly on leading laps along the way. Leading any laps (even just one) earns five bonus points, while leading the most laps earns another five, so seeing th enumber of laps led is important to know who’s earning points. In addition, a gray line has also been added to give some additional context as to when the “most laps” points were (or will be) awarded.
The gray line requires some server-side support to get working properly. At the start of the race, it sits at one lap beyond the half-way point. Any driver who leads that many laps is guaranteed the points. However, as the race goes on, it may become clear that no driver will lead that many laps, because there just aren’t enough laps left in the race. So, the threshold becomes the point where there aren’t enough laps for the driver with the second-most laps to catch the driver with the most. This can be calculated on the fly on the server and pushed down in a page refresh.
In addition, I still didn’t want to use a background image, even for the gray “most laps” bar, so I used a similar border trick to the zero line from the previous charts. The difference is, instead of putting bars on either side of the border, all lines start at the far left and just extend beyond the border if necessary (only one bar will do so per race). Unfortunately, this requires server-side work as well, because as the border moves to the left near the end of a race, the bars shrink accordingly, because their container is shrinking. To compensate, server-side code scales the bars according to the current size of the container, so they always take up the same number of pixels, regardless of any scaling issues.
Speaking of season-long point standings, the last bit of info is … well, it’s the season-long point standings. Near the end of the season, it becomes increasingly important to keep track of how many points each driver has, because only the top 12 go on to the NASCAR equivalent of the post-season. A solid black bar shows how many points are held by the driver at the beginning of the race, while a small gray extension shows how many points are (or will be) earned for the race being viewed. This was achieved by just positioning a second bar alongside the first, coloring it and giving a
z-index: -1 to stuff it behind the black bar.
The finished product
Obviously I’d like to get it to the point where it shows live results during a race, and that’s really not too challenging, given that NASCAR provides such a convenient data feed. Other than that, I’m not sure what other changes are in the cards for the future of this experiment.