How we did what we did
We are using the JSGO library for node.js to parse generic Counter Strike: Global Offensive demo recordings and extract information as JSON files. In the frontend we use d3.js and jQuery to visualize this information using SVGs.
The index.js file can be called with a number of arguments, depending on which events the user is interested in, for example
node index.js game.player_death game.player_footstep
The script then listens to the respective events emitted by the jsgo parsing process and stores this data in a number of JSON files.
These JSON files can be fed to the frontend code, which visualizes the data and allows the user to drill down into the data of individual players, specific rounds or certain types of rounds.
The article text is automatically scanned for words that can highlight certain elements in the main visualization. The author can set filters for each part of the article to underline their point made.
The visualization takes a filter object, which defines what is effectively being displayed and removes any data that does not fit these criteria. The rest is then displayed in the visualization. The filter object describes things like rounds, players, sides (T or CT), as well as visualization options, such as view directions, movement trails, death sites, and even an animated game replay.
All these options can be applied to the match in the "Explore the match on your own!" section. The info buttons in the toolbar give some information on what the options do. Go ahead and try it yourself!