index.html

<script src="graph-visualizer/src/sigma.core.js"></script>
<script src="graph-visualizer/src/conrad.js"></script>
<script src="graph-visualizer/src/utils/sigma.utils.js"></script>
<script src="graph-visualizer/src/utils/sigma.polyfills.js"></script>
<script src="graph-visualizer/src/sigma.settings.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.dispatcher.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.configurable.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.graph.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.camera.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.quad.js"></script>
<script src="graph-visualizer/src/classes/sigma.classes.edgequad.js"></script>
<script src="graph-visualizer/src/captors/sigma.captors.mouse.js"></script>
<script src="graph-visualizer/src/captors/sigma.captors.touch.js"></script>
<script src="graph-visualizer/src/renderers/sigma.renderers.canvas.js"></script>
<script src="graph-visualizer/src/renderers/sigma.renderers.webgl.js"></script>
<script src="graph-visualizer/src/renderers/sigma.renderers.svg.js"></script>
<script src="graph-visualizer/src/renderers/sigma.renderers.def.js"></script>
<script src="graph-visualizer/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="graph-visualizer/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="graph-visualizer/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="graph-visualizer/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="graph-visualizer/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="graph-visualizer/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.utils.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="graph-visualizer/src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="graph-visualizer/src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="graph-visualizer/src/middlewares/sigma.middlewares.copy.js"></script>
<script src="graph-visualizer/src/misc/sigma.misc.animation.js"></script>
<script src="graph-visualizer/src/misc/sigma.misc.bindEvents.js"></script>
<script src="graph-visualizer/src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="graph-visualizer/src/misc/sigma.misc.drawHovers.js"></script>
<script src="graph-visualizer/src/misc/sigma.misc.drawHovers.js"></script>
<script src="graph-visualizer/lib/jquery-3.3.1.min.js"></script>
<div id="container">
  <style>
    #svg {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      color: #fff;
      background: #14233c;
      position: absolute;
    }
  </style>
  <div id="svg">
  </div>
</div>
<script>
  const sigmaGraph = new sigma();
  $.getJSON("http://localhost:8000/output.json", (nodes) => {
    const keys = Object.getOwnPropertyNames(nodes);
    keys.forEach(key => {
      sigmaGraph.graph.addNode({id: key, label: key, x: Math.random(), y: Math.random(), size: nodes[key].length + 100});
    });
    keys.forEach(key => {
      nodes[key].forEach((link, i) => sigmaGraph.graph.addEdge({id: `${key}-${i}`, source: key, target: link.value}));
    });
    sigmaGraph.addRenderer({
      container: document.getElementById('svg'),
      type: 'svg',
      camera: sigmaGraph.addCamera(),
      settings: {
        hideEdgesOnMove: true,
        defaultLabelColor: '#fff',
        defaultNodeColor: '#999',
        defaultEdgeColor: '#333',
        edgeColor: 'default'
      }
    });
    sigmaGraph.refresh();
  });
</script>