All versions of this documentation
X

Legend

The legend is automatically generated from the styles applied by the design module.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

  <!-- we force the loading of the font awesome -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

<script>
'use strict';

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


ogma.parse.jsonFromUrl('files/solarCity-nostyle.json').then(function(g) {
  ogma.setGraph(g);
  ogma.view.locateGraph();
});

// Define the Node style rules
ogma.styles.addNodeRule({
  // the label is the value os the property name.
  text: function (node) { return node.getData('properties.name'); },

  // the size is proportional to the funding_total property
  radius: ogma.rules.slices({
    field: 'properties.funding_total',
    values: {nbSlices: 7, min: 3, max: 10}
  }),

  // the color is based on the funding_total property (from red to purple)
  color: ogma.rules.slices({
    field: 'properties.funding_total',
    values: ['#161344','#3f1c4c','#632654','#86315b','#a93c63','#cd476a','#f35371']
  }),

  // assign icons based on the node category
  icon: {
    content: ogma.rules.map({
      field: 'categories',
      values: {
        'COMPANY': "\uF135",
        'INVESTOR': "\uF19c",
        'MARKET': "\uF3a5"
      }
    }),
    font: 'Font Awesome 5 Free',
    color: 'white',
    style: 'bold'
  }
});

// Define the Edge style rules
ogma.styles.addEdgeRule({
  // the label is the value os the property name.
  text: function(edge) { return edge.getData('type'); },

  // the size is proportional to the raised_amount_usd property
  width: ogma.rules.slices({
    field: 'properties.raised_amount_usd',
    values: {nbSlices: 3, min: 1, max: 5}
  }),

  // the  color is based on the raised_amount_usd property (from blue to black)
  color: ogma.rules.slices({
    field: 'properties.raised_amount_usd',
    values: ['#54aef3', '#326896', '#132b43'],
    reverse: true
  }),

  // the shape is based on the type of edge
  shape: ogma.rules.map({
    field: 'type',
    values: {
      'INVESTED_IN': 'arrow',
      'ACQUIRED': 'tapered',
      'HAS_MARKET': 'dotted'
    }
  })
});

// Enable the legend
ogma.tools.legend.enable({
  position: 'bottom',
  titleTextAlign: 'center',
  shapeColor: 'black',
  circleStrokeWidth: 1
});

</script>
</body>
</html>