Show HN: Visualizing Chess Games

Wow, front page!

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.

[1]: https://github.com/canvg/canvg

[2]: https://github.com/louisabraham/chessviz

As a view of the territory control and piece advancement it is interesting, and certainly novel, but IMO the indicator of a really good visualization is how much information you can get from a quick scan, and this doesn't hold much of that for me. Even focusing on one for an extended time I have to look at where lines overlap and puzzle out ambiguities. Was that a pawn that gradually moved along its file enough to get promoted or the queen that started behind it and moved there in one move? Sometimes it's clear from the gap along the line that it couldn't be a pawn but for some files, especially the center ones, there were other pieces that landed on intermediate positions so it's something that could only be puzzled out by mentally replaying possible chains of movement, and then from there try to determine which other pieces might have been in the vicinity. The circular graphs on each position help some but they don't directly tell you when a piece's lifetime ended since they're all normalized to time spent occupying and you have to look to connected positions to determine if something started being somewhere else then (or at least, it's opaque to me without staring at it for a while).

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.

Really cool! Unfortunately, I don't play chess so can't comment on it. I used to watch StarCraft 2 (an RTS game) matches a lot and a recurring theme of viewership is that there's no specific display mode for the audience, so a lot of information is hidden and left to commentators. I believe future RTS games could develop a mode where the whole battlefield are split into grids and display a high-level unit movement/recon/territory capture etc akin to what you're doing here.

Would be cool to see this over multiple games opening tree style so you can start to see tendancies.

Nice work!

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.

looks cool, how can I use this information?