All versions of this documentation


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

Open in a new window.
          <!DOCTYPE html>
  <meta charset="utf-8">
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  <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>

'use strict';

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

ogma.parse.jsonFromUrl('files/solarCity-nostyle.json').then(function(g) {

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

  // 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: {
      field: 'categories',
      values: {
        'COMPANY': "\uF135",
        'INVESTOR': "\uF19c",
        'MARKET': "\uF219"
    font: 'FontAwesome',
    color: 'white'

// Define the Edge style rules
  // 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
    field: 'type',
    values: {
      'INVESTED_IN': 'arrow',
      'ACQUIRED': 'tapered',
      'HAS_MARKET': 'dotted'

// Enable the legend{
  position: 'bottom',
  titleTextAlign: 'center',
  shapeColor: 'black',
  circleStrokeWidth: 1