Graph database Analysis of the Steam Network
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
7.5 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Jrtechs Steam Friend Graph Project</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <link rel="stylesheet" href="css/bootstrap.css" media="screen">
  9. </head>
  10. <body>
  11. <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
  12. <div class="container">
  13. <a href="index.html" class="navbar-brand">Jrtechs Steam Graph Project</a>
  14. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  15. <span class="navbar-toggler-icon"></span>
  16. </button>
  17. <div class="collapse navbar-collapse" id="navbarResponsive">
  18. <ul class="navbar-nav">
  19. <li class="nav-item">
  20. <a class="nav-link" href="graphs.html">Graphs</a>
  21. </li>
  22. <li class="nav-item">
  23. <a class="nav-link" href="https://jrtechs.net">Blog</a>
  24. </li>
  25. <li class="nav-item">
  26. <a class="nav-link" href="https://jrtechs.me">Resume</a>
  27. </li>
  28. <li class="nav-item">
  29. <a class="nav-link" href="https://github.com/jrtechs">Github</a>
  30. </li>
  31. </ul>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="container">
  36. <br><br><br>
  37. <h1 id="steamgraphanalysis">Steam Graph Analysis</h1>
  38. <p>This is a project that I threw together during the weekend to play around with
  39. gremlin graph database. Currently this project scrapes the steam API for friends
  40. and their friends which can be used to generate a graph. This information is stored
  41. locally in a gremlin server and is then sent to the client via a web socket. </p>
  42. <p><img src="Diagram.svg" alt="Diagram" width="100%" /></p>
  43. <p><iframe width="560" height="315" src="https://www.youtube.com/embed/WJfo9bU0nH8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
  44. <p>This project is in the VERY early stages of development and is far from finished.
  45. If you are lucky, you will find it live at <a href="http://jrtechs.student.rit.edu/friendsOfFriends.html">http://jrtechs.student.rit.edu/friendsOfFriends.html</a>.
  46. It is still being actively developed and does not have permanent hosting so there is a %60
  47. chance at any time that you will be able to access it. </p>
  48. <p><img src="exampleGraph.png" alt="Graph" /></p>
  49. <h1 id="bugs">Bugs</h1>
  50. <ul>
  51. <li>Does not work with firefox</li>
  52. <li>Tends to crash w/o telling user if you provide an invalid steam id</li>
  53. </ul>
  54. <h1 id="todo">TODO</h1>
  55. <ul>
  56. <li>Include a steam name to steam id lookup</li>
  57. <li>Dockerize this entire environment</li>
  58. <li>Connect the gremlin/janus server to a HBase server for persistent storage</li>
  59. <li>Make the graphs look better -- possibly switch from sigma.js to d3</li>
  60. <li>Get the java web socket to work with ssh -- currently does not work with wss</li>
  61. <li>Make more graphs to provide more insights
  62. <ul>
  63. <li>Friends with friends -- shows which of your friends are friends with each other</li>
  64. <li>Most common friends friends -- will show you people you may know</li>
  65. <li>Graph of a larger chunk of the steam community</li>
  66. <li>...</li></ul>
  67. </li>
  68. <li>Write more documentation on how the system as a whole works.</li>
  69. <li>Write blog post on what I learned during this project. </li>
  70. </ul>
  71. </div>
  72. <!-
  73. ┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
  74. ┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
  75. ╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
  76. ▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
  77. ▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
  78. ╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
  79. ┈╲┈┈▏╭━━━━╯▕▕┈┈┈
  80. ┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
  81. ┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
  82. ┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
  83. ┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
  84. ┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
  85. ┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
  86. ┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
  87. ┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
  88. ┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
  89. If you are seeing this monkey that means that you are interested in my
  90. code. Yay!! If you are not here to hack me ... you should really consider
  91. contributing to some of my public projects on github.
  92. https://github.com/jrtechs
  93. -->
  94. <!-- Footer -->
  95. <footer class="text-center">
  96. <div class="footer-above">
  97. <div class="container">
  98. <div class="row">
  99. <div class="footer-col col-md-4">
  100. <h3>Location</h3>
  101. <p>Rochester Institute of Technology
  102. <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  103. </div>
  104. <div class="footer-col col-md-4">
  105. <h3>Around the Web</h3>
  106. <ul class="list-inline">
  107. <li class="list-inline-item">
  108. <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  109. <i class="fa fa-fw fa-youtube"></i>
  110. </a>
  111. </li>
  112. <li class="list-inline-item">
  113. <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  114. <i class="fa fa-fw fa-github"></i>
  115. </a>
  116. </li>
  117. <li class="list-inline-item">
  118. <a class="btn-social btn-outline" href="http://jrtechs.net">
  119. <i class="fa fa-fw fa-wordpress"></i>
  120. </a>
  121. </li>
  122. </ul>
  123. </div>
  124. <div class="footer-col col-md-4">
  125. <h3>About This Website</h3>
  126. <p>Check out the source code for this website on my
  127. <a href="https://github.com/jrtechs">github</a>.</p>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="footer-below">
  133. <div class="container">
  134. <div class="row">
  135. <div class="col-lg-12">
  136. <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
  137. document.write(new Date().getFullYear());
  138. </script> Jrtechs</p>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </footer>
  144. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  145. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  146. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  147. </body>
  148. </html>