Custom JSON

This example shows how you can pre-process the imported JSON in case when you for some reason cannot do it at an earlier stage. This is especially convenient for prototyping or static graphs. Click on any node to see its raw JSON shape
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700"
    rel="stylesheet" type="text/css">
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }

    #info {
      position: absolute;
      color: #fff;
      background: #141229;
      font-size: 12px;
      font-family: monospace;
      padding: 5px;
      top: 0;
      left: 0;
    }

    .attribution {
      font-family: 'Roboto', Helvetica, sans-serif;
      padding: 10px;
      text-align: center;
      font-size: 0.75em;
    }

    .attribution h1 {
      font-size: 1.5em;
    }

    .attribution .logo {
      width: 80px;
      height: 80px;
    }

    .ogma-tooltip {
      max-width: 240px;
      max-height: 280px;
      background-color: #fff;
      border: 1px solid #999;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      cursor: auto;
      font-family: Arial;
      font-size: 12px;
    }

    .ogma-tooltip-header {
      font-variant: small-caps;
      font-size: 120%;
      color: #000;
      border-bottom: 1px solid #999;
      padding: 10px;
    }

    .ogma-tooltip-body {
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      max-width: inherit;
      max-height: 180px;
      background: #ddd;
    }

    .ogma-tooltip-footer {
      padding: 10px;
      border-top: 1px solid #999;
    }

    .ogma-tooltip>.arrow {
      border-width: 10px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .ogma-tooltip.top {
      margin-top: -12px;
    }

    .ogma-tooltip.top>.arrow {
      left: 50%;
      bottom: -10px;
      margin-left: -10px;
      border-top-color: #999;
      border-bottom-width: 0;
    }

    .ogma-tooltip.bottom {
      margin-top: 12px;
    }

    .ogma-tooltip.bottom>.arrow {
      left: 50%;
      top: -10px;
      margin-left: -10px;
      border-bottom-color: #999;
      border-top-width: 0;
    }

    .ogma-tooltip.left {
      margin-left: -12px;
    }

    .ogma-tooltip.left>.arrow {
      top: 50%;
      right: -10px;
      margin-top: -10px;
      border-left-color: #999;
      border-right-width: 0;
    }

    .ogma-tooltip.right {
      margin-left: 12px;
    }

    .ogma-tooltip.right>.arrow {
      top: 50%;
      left: -10px;
      margin-top: -10px;
      border-right-color: #999;
      border-left-width: 0;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <div id="info">loading...</div>

  <script>
    'use strict';

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

    // data from https://en.wikipedia.org/wiki/Tokyo_subway
    var colors = {
      'G': '#F9A328',
      'M': '#EE2628',
      'H': '#C7BEB3',
      'T': '#00AFEF',
      'C': '#1BB267',
      'Y': '#D1A662',
      'Z': '#8C7DBA',
      'N': '#02B69B',
      'F': '#A95E33',
      'A': '#EF463C',
      'I': '#0072BC',
      'S': '#ABBA41',
      'E': '#CE1C64'
    };

    ogma.styles.addRule({
      edgeAttributes: {
        color: function (edge) {
          return colors[edge.getData('code')];
        },
        width: 12,
        //outline: true
      },
      nodeAttributes: {
        radius: 12,
        color: '#ffffff',
        innerStroke: {
          width: 7,
          color: '#505050',
          scalingMethod: 'scaled',
          minVisibleSize: 0
        },
        draggable: false,
        text: {
          minVisibleSize: 0,
          size: 8
        }
      }
    });

    function customJsonToRawGraph(input) {
      var edges = [];

      // keys are stations
      var edgesVisited = {};
      var nodes = Object.keys(input).map(function (name) {
        const node = input[name];
        node.connections.forEach(function (connection) {
          var source = name;
          var target = connection.target_id;

          // read line codes
          var sourceLine = source.substring(0, 1);
          var targetLine = target.substring(0, 1);

          // make edges bi-directional
          if (!edgesVisited[source + ':' + target] &&
            !edgesVisited[target + ':' + source]) {
            edgesVisited[source + ':' + target] = true;
            // identify the line by first symbol
            var code = (sourceLine === targetLine) ? sourceLine : null;
            edges.push({
              source: name,
              target: connection.target_id,
              data: { code: code }
            });
          }
        });
        return { id: name, data: node };
      });

      return { nodes: nodes, edges: edges };
    }

    ogma.tools.tooltip.onNodeClick(function (node) {
      return "<div class=\"arrow\"></div>" +
        "<div class=\"ogma-tooltip-header\">" + node.getId() + "</div>" +
        "<div class=\"ogma-tooltip-body\">" +
        "<code><pre>" + JSON.stringify(node.getData(), 0, 2) + "</pre></code>" +
        "</div>"
    }, { className: 'ogma-tooltip' });

    ogma.parse.jsonFromUrl('files/tokyo-subway.json', customJsonToRawGraph)
      .then(function (graph) { return ogma.setGraph(graph); })
      .then(function () {
        return ogma.layouts.force({
          gravity: 0,
          edgeStrength: 1
        });
      })
      .then(function () { return ogma.view.locateGraph(); })
      .then(function () {
        console.log('import done');
        var indicator = document.getElementById('info');
        indicator.parentElement.removeChild(indicator);
      });

    ogma.tools.brand.set(
      '<div class="attribution">' +
      '<img src="img/tokyo-metro.png" class="logo">' +
      '<h1>Tokyo Subway</h1>' +
      '<p>Sources: <a href="https://github.com/Jugendhackt/tokyo-metro-data/" target="_blank">graph</a>, <a href="https://en.wikipedia.org/wiki/Tokyo_subway" target="_blank">colors</a></p>' +
      '</div>', {
      position: "bottom-right",
      className: "myCssClass"
    });

  </script>
</body>

</html>