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.

258 lines
11 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. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  10. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > </script>
  11. <link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-touch-icon.png">
  12. <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
  13. <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon/favicon-16x16.png">
  14. <link rel="manifest" href="./img/favicon/site.webmanifest">
  15. <link rel="mask-icon" href="./img/favicon/safari-pinned-tab.svg" color="#5bbad5">
  16. <meta name="msapplication-TileColor" content="#da532c">
  17. <meta name="theme-color" content="#498FBE">
  18. </head>
  19. <body>
  20. <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
  21. <div class="container">
  22. <a class="navbar-brand" href="#">Steam Graph Project</a>
  23. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  24. <span class="navbar-toggler-icon"></span>
  25. </button>
  26. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  27. <ul class="navbar-nav mr-auto">
  28. <li class="nav-item active">
  29. <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
  30. </li>
  31. <li class="nav-item">
  32. <a class="nav-link" href="graphs.html">Graphs</a>
  33. </li>
  34. <!--<li class="nav-item">-->
  35. <!--<a class="nav-link" href="profile.html">Profile Look-Up</a>-->
  36. <!--</li>-->
  37. <li class="nav-item">
  38. <a class="nav-link" href="faq.html">FAQ</a>
  39. </li>
  40. </ul>
  41. <ul class="nav navbar-nav navbar-right">
  42. <li>
  43. <a class="nav-link" href="https://jrtechs.net">Blog</a>
  44. </li>
  45. <li>
  46. <a class="nav-link" href="https://jrtechs.me">Resume</a>
  47. </li>
  48. <li>
  49. <a class="nav-link" href="https://github.com/jrtechs">Github</a>
  50. </li>
  51. </ul>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="container">
  56. <br><br><br>
  57. <div id="carouselDiv" class="carousel slide" data-ride="carousel">
  58. <ol class="carousel-indicators">
  59. <li data-target="#carouselDiv" data-slide-to="0" class="active"></li>
  60. <li data-target="#carouselDiv" data-slide-to="1"></li>
  61. <li data-target="#carouselDiv" data-slide-to="2"></li>
  62. <li data-target="#carouselDiv" data-slide-to="3"></li>
  63. <li data-target="#carouselDiv" data-slide-to="4"></li>
  64. <li data-target="#carouselDiv" data-slide-to="5"></li>
  65. </ol>
  66. <div class="carousel-inner">
  67. <div class="carousel-item active">
  68. <img class="d-block w-100" src="img/slider/img1.png" alt="First slide">
  69. </div>
  70. <div class="carousel-item">
  71. <img class="d-block w-100" src="img/slider/img2.png" alt="Second slide">
  72. </div>
  73. <div class="carousel-item">
  74. <img class="d-block w-100" src="img/slider/img3.png" alt="Third slide">
  75. </div>
  76. <div class="carousel-item">
  77. <img class="d-block w-100" src="img/slider/img4.png" alt="Forth slide">
  78. </div>
  79. <div class="carousel-item">
  80. <img class="d-block w-100" src="img/slider/img5.png" alt="Fifth slide">
  81. </div>
  82. <div class="carousel-item">
  83. <img class="d-block w-100" src="img/slider/img6.png" alt="Sixth slide">
  84. </div>
  85. </div>
  86. <a class="carousel-control-prev" href="#carouselDiv" role="button" data-slide="prev">
  87. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  88. <span class="sr-only">Previous</span>
  89. </a>
  90. <a class="carousel-control-next" href="#carouselDiv" role="button" data-slide="next">
  91. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  92. <span class="sr-only">Next</span>
  93. </a>
  94. </div>
  95. <div class="row text-center">
  96. <div class="col text-center"><h1>Steam Graph Analysis</h1></div>
  97. </div>
  98. <div class="row">
  99. <div class="col-md-4">
  100. <p>This is a project that I threw together during a weekend to play around with
  101. graph databases. This project uses the steam api to acquire people's friends lists;
  102. this information is stored locally in a gremlin database. The client is sent information to
  103. render on their javascript graph as it is pulled from the graph database via a web socket.
  104. </p>
  105. <center>
  106. <h3>Try it out!</h3>
  107. <a href="graphs.html" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Make a Graph</a>
  108. </center>
  109. </div>
  110. <div class="col-md-8">
  111. <img src="Diagram.svg" alt="Diagram" width="100%" />
  112. </div>
  113. </div>
  114. <div class="d-flex justify-content-center">
  115. <p><iframe width="560" height="315" src="https://www.youtube.com/embed/DoDaHmyIPvQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
  116. </div>
  117. <div class="row">
  118. <div class="col-m-6">
  119. <h1 id="todo">Future Additions</h1>
  120. <ul>
  121. <li>Include a steam name to steam id lookup</li>
  122. <li>Dockerize this entire environment</li>
  123. <li>Connect the gremlin/janus server to a HBase server for persistent storage</li>
  124. <li>Get the java web socket to work with ssh -- currently does not work with wss</li>
  125. <li>Make more graphs to provide more insights
  126. <ul>
  127. <li>Most common friends of friends -- will show you people you may know</li>
  128. <li>Graph of a larger chunk of the steam community</li>
  129. <li>Graphs based on common games</li>
  130. <li>...</li>
  131. </ul>
  132. </li>
  133. <li>Write more documentation on how the system as a whole works.</li>
  134. </ul>
  135. <p>If you are interested in this project, or want to help work on it, check it out
  136. on <a href="https://github.com/jrtechs/SteamFriendsGraph">github</a>.</p>
  137. </div>
  138. <div class="col-m-6 w-50" id="repo1">
  139. <script src="src/RepoJS/repo.js"></script>
  140. <script>
  141. $('#repo1').repo({ user: 'jrtechs', name: 'SteamFriendsGraph' });
  142. </script>
  143. </div>
  144. </div>
  145. </div>
  146. <!-
  147. ┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
  148. ┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
  149. ╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
  150. ▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
  151. ▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
  152. ╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
  153. ┈╲┈┈▏╭━━━━╯▕▕┈┈┈
  154. ┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
  155. ┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
  156. ┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
  157. ┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
  158. ┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
  159. ┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
  160. ┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
  161. ┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
  162. ┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
  163. If you are seeing this monkey that means that you are interested in my
  164. code. Yay!! If you are not here to hack me ... you should really consider
  165. contributing to some of my public projects on github.
  166. https://github.com/jrtechs
  167. -->
  168. <!-- Footer -->
  169. <footer class="text-center">
  170. <div class="footer-above">
  171. <div class="container">
  172. <div class="row">
  173. <div class="footer-col col-md-4">
  174. <h3>Location</h3>
  175. <p>Rochester Institute of Technology
  176. <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
  177. </div>
  178. <div class="footer-col col-md-4">
  179. <h3>Around the Web</h3>
  180. <ul class="list-inline">
  181. <li class="list-inline-item">
  182. <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
  183. <i class="fa fa-fw fa-youtube"></i>
  184. </a>
  185. </li>
  186. <li class="list-inline-item">
  187. <a class="btn-social btn-outline" href="https://github.com/jrtechs">
  188. <i class="fa fa-fw fa-github"></i>
  189. </a>
  190. </li>
  191. <li class="list-inline-item">
  192. <a class="btn-social btn-outline" href="http://jrtechs.net">
  193. <i class="fa fa-fw fa-wordpress"></i>
  194. </a>
  195. </li>
  196. </ul>
  197. </div>
  198. <div class="footer-col col-md-4">
  199. <h3>About This Website</h3>
  200. <p>Check out the source code for this website on my
  201. <a href="https://github.com/jrtechs">github</a>.</p>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="footer-below">
  207. <div class="container">
  208. <div class="row">
  209. <div class="col-lg-12">
  210. <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">
  211. document.write(new Date().getFullYear());
  212. </script> Jrtechs</p>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </footer>
  218. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  219. <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>
  220. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  221. </body>
  222. </html>