About

This project aim to visualize critical game metrics, including player movements, economies, and other essential factors that influence gameplay. By facilitating performance comparisons, we deliver actionable insights that can inform strategic decisions and enhance team dynamics.

Currently, CS2 coaches encounter significant challenges in data analytics. Many tools offer only surface-level insights, while the complexity of raw data is uncomprehensible. This limits the ability to extract deeper contextual factors that affect gameplay.

Our project seeks to address these challenges, empowering coaches with comprehensive, user-friendly insights to elevate their teams' performance. Recognizing the need for more sophisticated analysis, we draw inspiration from traditional sports visualization methods, integrating techniques that are often underutilized in esports, such as detailed mapping.

Source Code

The source code of our project is hosted on KTH Student Github and open to the public. Please check the repository athttps://gits-15.sys.kth.se/iVis-CSSquare/cs-square.

Data

The match statistics displayed in this visualization were obtained from hltv.org by retrieving replay archives or downloading demo files after games. The demoinfocs-go library is used to access the raw data, which is transformed from .dem files into JSON format. This data includes player statistics and character statuses, logged frame by frame, enabling us to capture any changes that occur in individual frames during the match.

Used Data Reference

In our project, there are three matches preprocessed and presented as the sample dataset, The URL to download every match replay file is:

1. falcons-vs-g2-m3-mirage:https://www.hltv.org/matches/2378898/falcons-vs-g2-iem-katowice-2025
2. virtus-pro-vs-spirit-m2-ancient:https://www.hltv.org/matches/2378914/virtuspro-vs-spirit-iem-katowice-2025
3. vitality-vs-spirit-m1-dust2:https://www.hltv.org/matches/2378917/vitality-vs-spirit-iem-katowice-2025

One can access this pages, download the replays by clicking "Demo sponsored by Bitskins" in Rewatch section. The match replay files have exactly the same name shown in MatchSelector, with a suffix ".dem".

Method

Our target users are CS2 coaches. Their task includes developing game strategies tailored to the team's strengths and weaknesses and analyzing opponents’ gameplay to devise counter-strategies. They also providing feedbacks on gameplay, encouraging improvement and adaptation. Most importantly, identify areas for improvement by using data analytics to track player performance and team statistics. Therefore, we provide this tool that allows them through EXPLORING the graphs and data of players’ performances, The coaches can Summarize the match result by Identify the Outliers, Trends​ and Correlations.

References

1. 1.
   HLTV.org. (2023). Why we're still waiting for Counter-Strike's data revolution. Available at:https://www.hltv.org/news/40128/why-were-still-waiting-for-counter-strikes-data-revolution
2. 2.
   Bruno Panizzi. (2023).How to build a type-safe pie chart in SolidJs with d3 and tailwind https://dev.to/brunopanzzi/how-to-build-a-type-safe-pie-chart-in-solidjs-with-d3-and-tailwind-4jj6
3. 3.
   Valve Developer Community. (2024). Creating a working mini-map for CS:GO https://developer.valvesoftware.com/wiki/Creating_a_working_mini-map_for_CS:GO
4. 4.
   SolidJS Documentation. (2024). https://www.solidjs.com/
5. 5.
   D3.js. (2024). The JavaScript library for bespoke data visualization https://d3js.org/
6. 6.
   C. Perin, R. Vuillemot, C. D. Stolper, J. T. Stasko, J. Wood, and S. Carpendale, “State of the Art of Sports Data Visualization,” Comput. Graph. Forum, vol. 37, no. 3, pp. 663–686, Jun. 2018, doi: 10.1111/cgf.13447.
7. 7.
   T. Munzner, Visualization analysis and design. CRC press, 2014. Accessed: Mar. 05, 2025. [Online]. Available:https://books.google.com/books?hl=zh-CN&lr=&id=NfkYCwAAQBAJ&oi=fnd&pg=PP1&dq=Visualization+Analysis+and+Design&ots=ZB3iTC6qj3&sig=jAeRljejahuUt_95sS4QTSx2TXM