All versions of this documentation


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.

Open in a new window.
          <!DOCTYPE html>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
    #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;
  <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 class="controls">
      <button id="layout">Run</button>
'use strict';

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

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

ogma.parse.gexfFromUrl('files/karate.gexf').then(function (g) {

  document.querySelector('#layout').addEventListener('click', function (evt) {
    var form = document.querySelector('#focus-select');
    var focusInput =['focus'], function(input) {
      return input.checked;
    var focusNode = focusInput.value;
    var animate   = form['animate'].checked;
    var overlap   = form['overlap'].checked;
    var randomize = form['randomize'].checked;
    run(focusNode, animate, overlap, randomize);