All versions of this documentation

Data-driven styles

Open in a new window.
          <!DOCTYPE html>
  <meta charset="utf-8">
  <link href="" 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'

  // Load data from a json file.
  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': "\uF3a5"
      font: 'Font Awesome 5 Free',
      style: 'bold',
      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
    // 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'