[HN Gopher] Show HN: Visualizing Chess Games
       ___________________________________________________________________
        
       Show HN: Visualizing Chess Games
        
       Author : Labo333
       Score  : 43 points
       Date   : 2024-08-11 12:33 UTC (10 hours ago)
        
 (HTM) web link (louisabraham.github.io)
 (TXT) w3m dump (louisabraham.github.io)
        
       | fogx wrote:
       | looks cool, how can I use this information?
        
         | Labo333 wrote:
         | Well I meant to make a beautiful poster at first. But you can
         | see what cells were important at what stage of the game!
        
       | kevindamm wrote:
       | 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.
        
         | kevindamm wrote:
         | Follow-up thought, I wonder if this approach could be applied
         | to multiple games from the same player in a way that draws out
         | certain habits. Like, if a player is very fond of a certain
         | opening that would be clear by looking at a combined version of
         | this visualization across all their games for the first 6-10
         | moves, and hiding anything that didn't have high correlation
         | across games.
         | 
         | 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).
        
           | dleeftink wrote:
           | You may be interested in the structural relationship explorer
           | by JKU Labs [0], which condenses hundreds of chess matches in
           | a lower-dimensional space, revealing multiple win/loss states
           | and trajectories and the (dis)similar strategies of expert
           | matches. It's one of my favourite visualisations.
           | 
           | [0]: https://jku-vds-
           | lab.at/publications/2022_embedding_structure...
        
             | Labo333 wrote:
             | Wow, that's super interesting! Thank you I will look into
             | it!
        
       | Labo333 wrote:
       | 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
        
       | Hammershaft wrote:
       | 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.
        
       | CSMastermind wrote:
       | Would be cool to see this over multiple games opening tree style
       | so you can start to see tendancies.
        
       | Jianghong94 wrote:
       | 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.
        
       ___________________________________________________________________
       (page generated 2024-08-11 23:01 UTC)