All versions of this documentation
X

Data-driven styles


Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
  <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'
  });

  // Load data from a json file.
  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': "\uF219"
        }
      }),
      font: 'FontAwesome',
      color: 'white'
    }
  });

  // use images stored in the picture property if available
  ogma.styles.addNodeRule(function (node) {
    return !!node.getData('properties.picture');
  }, {
    image: {
      url: function (node) {
        return node.getData('properties.picture');
      }
    },
    icon: {
      // If there is an image, don't display the icon
      content: null
    }
  });

  // 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'
      }
    })
  });

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