back · main · about · writing · notes · d3 · contact

Graphs 'n stuff: simple line chart with d3
8 May 2016 · 526 words

Tennis: a sport almost designed for statistical analysis. You have only two primary variables (players) up against each other - whereas for something  like soccer, you have 22 players who can impact the play. Much simpler - yet infinitely more complicated at the same time.

With this in mind (and with the aid of the mountains of tennis data available) I decided to trial a simple betting strategy. Simply put, it compares calculated probabilities for the outcome of tennis matches against the odds done by bookmakers. Hey, I said it was simple!

If my probabilities were more accurate than that of bookmakers, then I would make money. If they were less accurate, I would lose money.

I paper traded the strategy for a while and tracked the results. I assumed that for each bet I would put up $50. I also assumed (naively) that the odds I would get were the best available online.

The results are perfect for tracking in a line graph. So I made one!

You can find it here. It’s a line graph of my cumulative profit over time, with a cool tooltip thrown in. You’ll notice that I didn’t make much money.

However, as this is primarily a d3 post, I’ll go through that kind of stuff. Perhaps later I’ll go through my method in detail and where it fell apart.

Here are some of the things I learnt making the graph;

d3.extent(["13-01-1999","13-02-1999", "13-01-1998"]
// gives ["13-01-1998", "13-02-1999"]

It turns out that you can make a nice array of basic graphs without delving into any of the animation capabilities of d3. I particularly like the tooltip functionality of this graph: we’re not repeating information that we can see already on the graph, and the blue lines allow us to easily check the values against the x and y axis.

On the other hand, creating it was significantly more complicated than using the d3-tip package. A trade-off between time and results needs to be considered. This especially applies for beginners (like myself).

back · main · about · writing · notes · d3 · contact