Youth soccer: Stay in position! An updated app.
A web app to track and visualize player movements, prototyped with HTML, CSS, JavaScript, and Python. And now improved.
One in a series of projects highlighting my progress as a self-taught programmer.
I began teaching myself Python, SQL, and GIS in spring 2023 — starting from zero. I therefore welcome feedback on these projects and review for errors. And I’d be interested in taking a crack at your own data and geospatial questions too. Please get in touch.
* Update, 15 November 2023: I added event categorization to my app (e.g. pass, shot, etc.) and relaunched at https://matchlogger.com .
13 October 2023
Background
Version 1.0 of my soccer match logger relied on statistical manipulation to convert grainy data capture into a smooth heat map of player positioning over the course of a match. I wasn’t fully pleased with the results. Dividing a soccer pitch into twelve rectangles (twelve buttons on my web app) might have simplified the data, but the resulting visualizations were no match for the heat map produced by the full x, y spectrum available to the comprehensive system that logged star left midfielder Ousmane Dembélé’s every touch in an old Barcelona match. No matter how I randomized points, binning Dembélé’s location data into my twelve boxes (only twelve possible x, y coordinates) produced diagrams of varying splotchiness:
KDE - Dembélé “original.” Kernel Density Estimation (KDE) heat map calculated with 227 points at their original x, y coordinates. x allowable range of 0.0-80.0; y allowable range of 0.0-120.0. (Over 950,000 possible x, y combinations.)
KDE - Dembélé base. Points binned to 12 boxes.
KDE - Dembélé uniform. Points binned and scattered uniformly.
KDE - Dembélé jitter. Points binned and jittered.
KDE - Dembélé Gaussian. Points binned and scattered using Gaussian spread.
Then I realized the JavaScript required to record fine-grain x, y coordinates really wasn’t very complex at all. I modified my logger and then refactored the Python behind my heat maps, still taking inspiration from the mplsoccer library but ditching it in favor of matplotlib and seaborn for hands-on control of x, y machinations and, I felt, better flexibility for any future development of this project.
Project outputs
Here is version 2.0 of my match event logger, designed to record the precise x, y coordinates of each tap/click of the screen tap:
Red dots now provide visual feedback of taps/clicks, and I’ve added an option to delete the most recent logged event. As before, the points (now with timestamp) can be exported as a csv file. When that csv is read into my revised Python script, we get heat maps like this:
Techniques
Besides a new JavaScript function, pandas dataframe tweaks, and swapping the mplsoccer wrapper for matplotlib and seaborn, my process for this update differs little from the original.
My biggest issue in coding the pitch and heat map “by hand” (i.e. matplotlib, seaborn) was managing axes. Between (i) working with a vertical pitch and (ii) the mismatch between Cartesian and web development coordinate systems (0, 0 is not in the same “corner” of a graph/element), my initial trials flipped highlights every which wrong way, and red dots appeared in mirror-opposite locations of taps. Still, having defined the x, y structure myself from input to export to calculation to plotting, I believe I will have better control and clarity going forward with any further features.
Finally, I didn’t completely nix statistical jitter. My Python code includes an option to jitter all recorded points to acknowledge user imprecision in logging event locations.
Data sources
Again, this web app is for my/your own data collection.
