Radial

Radial layout positions nodes around the selected one based on their graph-theoretical distance (shortest path in the graph, connecting them). If there are subgraphs or nodes not reachable from the central node, they will be pushed outwards, but still placed around the layout in a readable way.

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }

    #focus-select {
      position:   absolute;
      top:        20px;
      right:      20px;
      padding:    10px;
      background: white;
      z-index:    400;
    }

    #focus-select label {
      display: block;
    }

    #focus-select .controls {
      text-align: center;
      margin-top: 10px;
    }

    #focus-select .content {
      line-height: 1.5em;
    }

    .control-bar {
      font-family:   Helvetica, Arial, sans-serif;
      box-shadow:    0 1px 5px rgba(0,0,0,0.65);
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div id="graph-container"></div>
  <form id="focus-select" class="control-bar">
    <div class="content">
      <label><input type="radio" name="focus" checked value="1.0" /> Instructor</label>
      <label><input type="radio" name="focus" value="34.0" /> Administrator</label>
      <label><input type="checkbox" name="overlap" /> allow nodes overlap</label>
      <label><input type="checkbox" name="animate" /> animate</label>
      <label><input type="checkbox" name="randomize" /> randomize</label>
    </div>
    <div class="controls">
      <button id="layout">Run</button>
    </div>
  </form>
<script>
'use strict';

var ogma = new Ogma({
  container: 'graph-container'
});

function run (centralNodeId, animate, overlap, randomize) {
  console.time('radial stress');
  ogma.layouts.radial({
    centralNode:  centralNodeId,
    renderSteps:  animate,
    randomize:    randomize,
    allowOverlap: overlap,
    maxIterations: 200,
    epsilon: 0.1
  }).then(function () {
    console.timeEnd('radial stress');
    ogma.view.locateGraph({
      easing: 'linear',
      duration: 200
    });
  });
}

ogma.parse.gexfFromUrl('files/karate.gexf').then(function (g) {
  ogma.setGraph(g);
  ogma.view.locateGraph();

  document.querySelector('#layout').addEventListener('click', function (evt) {
    evt.preventDefault();
    var form = document.querySelector('#focus-select');
    var focusInput = Array.prototype.filter.call(form['focus'], function(input) {
      return input.checked;
    })[0];
    var focusNode = focusInput.value;
    var animate   = form['animate'].checked;
    var overlap   = form['overlap'].checked;
    var randomize = form['randomize'].checked;
    run(focusNode, animate, overlap, randomize);
  });
});
</script>
</body>
</html>