Improving the Best of Visualization

If you read the comments on yesterday’s post there was a bit of a discussion about some alternatives to the number of boxes in the best of visualization I created. When I built that visualization I based it on the number of games + 1. This would prevent a situation where a full series was required and the final score was ambiguous

Sorry, who won that last game?

By using colours it is possible to make this look a bit better. This also offers us an opportunity to generalize some of the code written yesterday.

The most obvious improvement is around the function shouldBeFilled

First thing is that the function name is lying. It isn’t telling if the box should be filled or not. It is setting the fill color. So let’s rename it. Next up the use of hard coded values for the colours bugs me. If we’re going to be using a different colour for each team then we have to change this.

Here I’ve gone ahead and assumed that I have an options object in my class. I don’t so one will need to be added. I’d like to maintain backwards compatibility so I’ll set up some default values for options.

Nobody calling my needs to change their signature but they can still override the options if they wish. $.extend is a jQuery helper which merges the properties on two objects. One could even say that it composes a new object.

It is clear which team won now

To set the options a caller can just do

Guess which one uses pink

There was also talk of adding some emphasis to the center block. I do have some ideas for that which we’ll explore in a future post. You can see the results of today’s post athttp://bl.ocks.org/stimms/5734160