The current visualization is by far not perfect but it was hard for me to put more information there. Please give your ideas to improve this visualization or make others!
I mostly aimed at making an aesthetically pleasant image that would represent what cells were controlled and moves were used the most.
As for usage examples, it's very easy to see the difference between European and Indian openings (the former advancing in the center and the latter on the sides) and it's quite easy to guess who won by looking at who controlled the most cells last.
On the tech side, this is a single-file, local first, vanilla JS app querying the (non official) chessgames.com API through corsproxy.io (because CORS). Then I draw using svg elements. Finally, I use canvg [^1] to produce png images. The js code is embedded in the HTML so you can read the code just by viewing the source (or look on github [^2]). I also have a Python version that I also maintain to produce the same outputs as the browser version.
I'm not a chess master or anything, so I'd be curious to hear what an expert player thinks of this.
I also wonder if adding a kind of heat graph layer for indicating "player had this position in reach" for the proportion of the game, might provide additional useful information about the balance of territory control, or whether superimposing the pieces at the final position might make it easier to scan.
EDIT: ok, after staring at the clock faces on each position some more, I can get an intuition by looking at whether it's colored in all the way through as to whether a piece was likely captured there or moved to a connected position (seeing if it resumed existing at another position by whether the angle of coloring lines up) but it's still incredibly difficult to determine which piece was there at the endgame. Mid-game is completely muddled for me even with understanding the clock-shading better. The most I've been able to get from a quick scan is whether there was a lot of capturing or if the game was more about positioning.
Perhaps the element that makes this kind of visualization difficult to apply here is that both extremely long games and very short games are having to fit in the same amount of visual space. The two primary dimensions are number of circles and number of independent segments in the circles, and even for short games that reaches some level of too numerous to count in a scan.
To address the scannability, maybe the outlines could be different based on which piece was there in the final position? Circles or small circles for locations that have a lot of traffic? So much information about a game is indicated by the pieces' final position so I feel like this could reduce the opacity some (but again, I'm not an expert chess player so maybe I'm just inadequate at inferring much information from these).
[0]: https://jku-vds-lab.at/publications/2022_embedding_structure...
It would be cool if you could click on a circle to see a panel with all pieces moved onto that circle in chronological order, and then click on a piece to see it's full route across the board highlighted, with the highlight changing intensity the further away from the circle clicked on.
