Blog Post 5: First Intermediate Implementation

SportsViz
5 min readApr 22, 2021

--

Dear Data Visualization Family,
Things are heating up! We are slowly but surely progressing into ideas that we sort of visualized in our convergence phase, but could not fully see. Some interesting things have happened since we last spoke, so let’s discuss.

First we learned that after playing around primarily in Tableau, we will not actually be using Tableau for our final project! This threw us for quite the loop, and honestly it is one we are still recovering from. We realized that although we had taken the “no limits” advice to heart, somewhere in the back of our minds we kind of pictured what was a good blend of ambitious and accessible to us in Tableau as we entered the convergence phase. So, admittedly, there was a *bit* of time spent licking our tableau-less wounds.

However when listening to Professor Peeters speak passionately about Svelte, we realized that in some ways, Tableau itself is a beginner software, so the idea of “ambitious” might not pair well with “tableau.” And that’s when we were able to (mostly) take off again.

The next thing to do was decide from our list of library options for coding the project, that is Svelte, P5, D3 or Vega. Our team is a blend of beginner to more advanced coders, from various scientific backgrounds. Since learning an entirely new language or library for a single project is not a rare request, it was not something we were exactly surprised by. However, this request never really gets easier, as it holds the power to possibly turn your experience in the course from “learning the thing the course is teaching you” to “learning this new language.” It’s clear how these two things are entwined, which must be why this request is not an uncommon one. Ok, so, that was our lived personal experience of the assignment, now here’s the professional part, ahem.

We last left off in our “first visuals” phase, which can be viewed here. We have since then progressed on the project in the specific ways we mentioned in our last post. These elements include:

1 — Interaction
Remember how we had read up a bit on the scientific literature about what problems specifically worry the Sports visualization scientist, and how to solve them? The answer seemed to keep coming back to interaction — it solves everything! So we played around with the idea of an interactive dashboard. What if we put flags to represent the countries, and then you can click on a flag, and that will take you to the country’s field, and on that field you will find our visualizations? But then we realized how that sort of undermines our goal a bit — to be able to compare multiple countries at once — but it also limits what the user can experience in that they are left to find trends on their own. This detail is important to us for a special reason, which comes back to what started this project for us at all — our sports fandom. We wanted to reimagine the concept of interactivity to that the user could still control their experience, but that the data scientists can be the ones forming the narrative. This opens up the possibility for new publics to become interested in football where an absolute beginner can come feel the wonder of football without knowing a thing at the door. To achieve this, we decided to use a sort of scroll function on the webpage, similar to what can be found here.

2 — Event Reduction — Sort of

One of the first things we realized was the massive number of events there are involved here, and it quickly becomes difficult to find meaning in a cloud of random points. So we need a way to summarize them. We considered a few different things here. First, could we meaningfully throw some of them out by narrowing our focus/interest? Yes! We realized this could work. At the time of narrowing our focus, we were still incredibly ambitious and wanted to be original! We thought, what’s something we don’t fully understand about football yet? And that’s when we realized, there’s so much glory given to the single player scoring a goal, but isn’t it a team effort? Could we visualize that somehow? Aha! What if we focus in on the few minutes leading up to a goal, and see what we find? (Please note, of course, a team’s defense plays a massive role in a team’s ability to win a game, however defensive play is currently outside the scope of this project).

So now that we have limited the time period we our focusing on to the first few minutes before a goal, we have some less data points, cool. But there are still a huge amount left. What do we do now? Could we cluster them? We decided not to do that since we already know the event types, classification per se is not a thing we are after. Could we take the averages of each event type (i.e. pass, shot etc), and group them by say, match and/or player? Yep! So that brings us to where we are now.

We have decided to do the project in P5, because it seems to be favored by our peers and that in our eyes is an indicator of its likeliness to be or become valued by our future employers. Do you want to see what we have so far? It’s kinda cool!

Visualization of events on the field in P5
Filtering out the shots of all the events in a single match
Belgium (red) vs Brazil (yellow) game (2:1)
Sankey diagram of event per player for the Belgium (left) vs Brazil (right) game (2:1)
Sankey Diagram of events per player for the Belgium (left) versus Brazil (right) game (2:1) in Javascript

By the way, are you interested in some of the more technical details about how we are doing this in P5? Then you can check out a post where we go into that in more detail here.

Be on the lookout for our next blog, where we solve some of the more technical things to realize our visualization:
-Some of the goals are coming out “mirrored” (from right to left)
-How to integrate a drop down menu (for match, player, etc) but still keep in mind the scroll and our ability to control the narrative?
-Could we do some playing around ourselves and see any patterns? What is emerging? Are the top, say, 16 teams showing some things in common in the events before a goal, or — more interestingly — are any of them perhaps showing disparity?

Ok, that’s all for now. Stay tuned. Thanks for your time and attention. We hope to see you again soon!

--

--