lcs_teammate_net.html

<!-- START SIGMA IMPORTS -->
<script src="sigma.min.js"></script>
<!-- END SIGMA IMPORTS -->

<!-- START GEXF IMPORTS -->
<script src="plugins/sigma.parsers.gexf.min.js"></script>
<!-- END GEXF IMPORTS -->

<!-- START DRAG NODES IMPORTS -->
<script src="plugins/sigma.plugins.dragNodes.min.js"></script>
<!-- END DRAG NODES IMPORTS -->

<!-- START FILTER IMPORTS -->
<script src="plugins/sigma.plugins.filter.min.js"></script>
<!-- END FILTER IMPORTS -->

<!-- START ANIMATE IMPORTS -->
<script src="plugins/sigma.plugins.animate.min.js"></script>
<!-- END ANIMATE IMPORTS -->

<!-- START MY IMPORTS -->
<script src="util.js"></script>
<script src="rendererUtil.js"></script>
<script src="gexfParseUtil.js"></script>
<script src="filterUtil.js"></script>
<script src="lcs-graph-util.js"></script>
<!-- END MY IMPORTS -->

<!-- START Plotly.js IMPORTS -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
></script>

<script
  type="text/javascript"
  src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"
></script>
<link
  rel="stylesheet"
  href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
  type="text/css"
  media="screen"
/>
<!-- END Plotly.js IMPORTS -->

<!-- font for filter block -->
<link
  href="http://fonts.googleapis.com/css?family=Lato:300,700"
  rel="stylesheet"
  type="text/css"
/>
<link href="style.css" rel="stylesheet" type="text/css" />

<div id="container">
  <div id="attributepane"">
  <div class="text">
    <div title="Close" class="left-close returntext"></div>
    <div id="legend">
        <div class="box">
          <h2>Legend:</h2>
          <dl>
            <dt class="node"></dt>
            <dd>Champion</dd>
            <dt class="edge"></dt>
            <dd>Teammate</dd>
          </dl>
        </div>
      </div>
      <span class="line"></span>
      <div class="b1">
          <h2>Filters:</h2>
          <div id="control-pane">
            <!-- min and max drag bar -->
            <div>
              <h3>min degree <span id="min-degree-val">0</span></h3>
              0 <input id="min-degree" type="range" min="0" max="0" value="0" />
              <span id="max-degree-value">0</span><br />
            </div>
  
            <div id="dump" class="hidden"></div>
          </div>
          <div>
            <input
              type="checkbox"
              name="role-check"
              value="role-check"
              id="role-check"
              checked
              onclick="onRoleCheckClicked()"
            />
            <h3 style="display: inline-block;">Role</h3>
            <br />
            <div id="role-list" class="cchecked">
              <input
                type="checkbox"
                name="top"
                value="top"
                id="top"
                checked
                onclick="filterTopOnClick()"
              />
              Top<br />
              <input
                type="checkbox"
                name="jungle"
                value="jungle"
                id="jungle"
                checked
                onclick="filterJungleOnClick()"
              />
              Jungle<br />
              <input
                type="checkbox"
                name="mid"
                value="mid"
                id="mid"
                checked
                onclick="filterMidOnClick()"
              />
              Mid<br />
              <input
                type="checkbox"
                checked
                name="bot"
                value="bot"
                id="bot"
                checked
                onclick="filterBotOnClick()"
              />
              Bot<br />
              <input
                type="checkbox"
                name="support"
                value="support"
                id="support"
                checked
                onclick="filterSupportOnClick()"
              />
              Support<br />
            </div>
          </div>
          <span class="line"></span>
          <div>
            <!-- allows nodes to be dragged -->
            <input type="checkbox" name="drag" value="drag" id="drag" /> Drag
            enabled<br />
          </div>
        </div>
    <div class="headertext">
      <span>Champion Info</span>
    </div>
    <div class="nodeattributes">
      <div id="name" class="name"></div>
      <div id="graph" class="data">
        <div id="kda-graph" class="graph-pane"></div>
        <div id="dmg-per-min-graph" class="graph-pane"></div>
        <div id="gold-at-15-graph" class="graph-pane"></div>
        <div id="cs-at-15-graph" class="graph-pane"></div>
        <div id="gold-diff-at-15-graph" class="graph-pane"></div>
        <div id="csd-at-15-graph" class="graph-pane"></div>
      </div>
    </div>
  </div>
</div>
<div id="graph-container"></div>
<script>
  // renderer for animation
  sigma.utils.pkg("sigma.canvas.nodes");
  sigma.canvas.nodes.image = getRenderer();

  // sigma setup
  var s = new sigma({
    renderer: {
      // This works only with the canvas renderer, so the
      // renderer type set as "canvas" is necessary here.
      container: document.getElementById("graph-container"),
      type: "canvas"
    },
    settings: {
      minNodeSize: 8,
      maxNodeSize: 16,
      edgeColor: "default",
      defaultEdgeColor: "#ccc",
      animationsTime: 1000,
      defaultLabelColor: "#000",
      defaultLabelSize: 10,
      labelThreshold: 23,
      labelFontStyle: "bold",
      hoverFontStyle: "bold",
    }
  });

  // gexf parsing
  sigma.parsers.gexf("data/lcs_net_min.gexf", s, function(s) {
    // set up nodes and edges
    s.graph.nodes().forEach(function(n) {
      // set image urls
      n.type = "image";
      n.imageUrl =
        "https://opgg-static.akamaized.net/images/lol/champion/" +
        n.attributes.url +
        ".png?image=w_45&v=1";

      // give nx a default
      Object.assign(n, {
        nx: n.x
      });
      Object.assign(n, {
        ny: n.y
      });
    });

    // save the original colors of our
    // nodes and edges
    s.graph.nodes().forEach(function(n) {
      n.originalColor = n.color;
    });
    s.graph.edges().forEach(function(e) {
      e.originalColor = e.color;
    });

    // When a node is clicked, we check for each node
    // if it is a neighbor of the clicked one. If not,
    // we set its color as grey, and else, it takes its
    // original color.
    // We do the same for the edges, and we only keep
    // edges that have both extremities colored.
    s.bind("clickNode", function(e) {
      var dragging = _.$("drag").checked;
      setColors(e, dragging, s);

      if (!dragging) {
        sigma.plugins.animate(s, {
          x: "nx",
          y: "ny"
        });
      }
    });

    // When the stage is clicked, we just color each
    // node and edge with its original color.
    s.bind("clickStage", function() {
      resetColors(s);
    });

    // filter setup, need to do it in here idk why tbh
    var filter = new sigma.plugins.filter(s);
    var filter2 = new sigma.plugins.filter(s);
    var filter3 = new sigma.plugins.filter(s);
    updatePane(s.graph, filter, filter2, filter3, s);

    // set up min and max degree slider
    _.$("min-degree").addEventListener("input", applyMinDegreeFilter); // for Chrome and FF
    _.$("min-degree").addEventListener("change", applyMinDegreeFilter); // for IE10+, that sucks
  });

  // dragging setup
  var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);

  dragListener.bind("startdrag", function(event) {
    console.log(event);
  });
  dragListener.bind("drag", function(event) {
    console.log(event);
  });
  dragListener.bind("drop", function(event) {
    console.log(event);
  });
  dragListener.bind("dragend", function(event) {
    console.log(event);
  });

  plotKdaGraph();
  plotDmgPerMinGraph();
  plotGoldAt15Graph()
  plotGoldDiffAt15Graph()
  plotCSAt15Graph();
  plotCSDAt15Graph();
</script>