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.
 
 
 
 

329 lines
11 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jrtechs Steam Friend Graph Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<script src="src/sigma.core.js"></script>
<script src="src/conrad.js"></script>
<script src="src/utils/sigma.utils.js"></script>
<script src="src/utils/sigma.polyfills.js"></script>
<script src="src/sigma.settings.js"></script>
<script src="src/classes/sigma.classes.dispatcher.js"></script>
<script src="src/classes/sigma.classes.configurable.js"></script>
<script src="src/classes/sigma.classes.graph.js"></script>
<script src="src/classes/sigma.classes.camera.js"></script>
<script src="src/classes/sigma.classes.quad.js"></script>
<script src="src/classes/sigma.classes.edgequad.js"></script>
<script src="src/captors/sigma.captors.mouse.js"></script>
<script src="src/captors/sigma.captors.touch.js"></script>
<script src="src/renderers/sigma.renderers.canvas.js"></script>
<script src="src/renderers/sigma.renderers.webgl.js"></script>
<script src="src/renderers/sigma.renderers.svg.js"></script>
<script src="src/renderers/sigma.renderers.def.js"></script>
<script src="src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="src/renderers/svg/sigma.svg.utils.js"></script>
<script src="src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="src/middlewares/sigma.middlewares.copy.js"></script>
<script src="src/misc/sigma.misc.animation.js"></script>
<script src="src/misc/sigma.misc.bindEvents.js"></script>
<script src="src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="src/misc/sigma.misc.drawHovers.js"></script>
<script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
<script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<a href="index.html" class="navbar-brand">Jrtechs Steam Graph Project</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="graphs.html">Graphs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://jrtechs.net">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://jrtechs.me">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/jrtechs">Github</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END SIGMA IMPORTS -->
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
/*background-color: #455660;*/
}
.sigma-edge {
/*stroke: #14191C;*/
}
.sigma-node {
/*fill: green;*/
/*stroke: #14191C;*/
/*stroke-width: 2px;*/
}
.sigma-node:hover {
fill: blue;
}
.muted {
fill-opacity: 0.1;
stroke-opacity: 0.1;
}
</style>
<div id="graph-container" style="width:100%; height:100%"></div>
</div>
<script>
var s,
g = {
nodes: [],
edges: []
},
colors = [
'#617db4',
'#668f3c',
'#c6583e',
'#b956af'
];
// Instantiate sigma:
s = new sigma({
graph: g,
settings: {
enableHovering: false
}
});
s.addRenderer({
id: 'main',
type: 'svg',
container: document.getElementById('graph-container'),
freeStyle: true
});
getData = getUrlVars();
connection = new WebSocket('ws://localhost:4444');
connection.onopen = function ()
{
console.log('Connected!');
if(getData["id"] != undefined && getData["id"] != "")
{
connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}");
}
else
{
connection.close();
}
};
// Log errors
connection.onerror = function (error)
{
console.log('WebSocket Error ' + error);
};
function getUrlVars()
{
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function addNodeToGraph(request)
{
if(s.graph.nodes(request.id) == undefined)
{
s.graph.addNode({
id: request.id,
label: request.name,
x: request.x,
y: request.y,
size: request.size,
color: colors[Math.floor(Math.random() * colors.length)]
});
s.refresh();
}
}
function addEdgeToGraph(request)
{
s.graph.addEdge({
id: request.id,
source: request.p1,
target: request.p2,
size: 1
});
s.refresh();
}
// Log messages from the server
connection.onmessage = function (e)
{
var request = JSON.parse(e.data);
if(request.action == 1)
{
addNodeToGraph(request);
}
else if(request.action == 2)
{
addEdgeToGraph(request);
}
};
//jquery stuff for hiding and displaying users when clicked
s.bind('clickNode doubleClickNode rightClickNode', function(e)
{
console.log(e.type, e);
$('.sigma-node, .sigma-edge').each(function()
{
mute(this);
});
var neighbors = s.graph.neighborhood(e.data.node.id);
neighbors.nodes.forEach(function(node)
{
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge) {
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
// Binding silly interactions
function mute(node)
{
if (!~node.getAttribute('class').search(/muted/))
node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
}
function unmute(node)
{
node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
}
$('.sigma-node').click(function()
{
console.log("click");
$('.sigma-node, .sigma-edge').each(function()
{
mute(this);
});
// Unmuting neighbors
var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
neighbors.nodes.forEach(function(node)
{
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge)
{
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
s.bind('clickStage', function()
{
$('.sigma-node, .sigma-edge').each(function()
{
unmute(this);
});
});
</script>
<!-
┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
┈╲┈┈▏╭━━━━╯▕▕┈┈┈
┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
If you are seeing this monkey that means that you are interested in my
code. Yay!! If you are not here to hack me ... you should really consider
contributing to some of my public projects on github.
https://github.com/jrtechs
-->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>