From c5e0ed65d7206c119a360fdfcde1abe57c2bf8bd Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Tue, 5 Jul 2016 16:15:16 +0300
Subject: [PATCH 1/8] add force layout button

---
 .../src/app/notebook/paragraph/paragraph-chart-selector.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index eab741b26cb..a45d5ad4c4d 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -59,6 +59,11 @@
           ng-click="setGraphMode('map', true)"
           tooltip="Map" tooltip-placement="bottom"><i class="fa fa-map-marker"></i>
   </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-if="paragraph.result.type == 'TABLE'"
+          ng-class="{'active': isGraphMode('forceLayout')}"
+          ng-click="setGraphMode('forceLayout', true)"><i class="fa fa-share-alt"></i>
+  </button>
 
   <button type="button"
           ng-if="paragraph.result.type != 'TABLE'"

From cc20848c424111a79559fb1e9f88a676cce60028 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Tue, 5 Jul 2016 16:15:34 +0300
Subject: [PATCH 2/8] add div and svg tags that will contain the force layout
 object

---
 .../src/app/notebook/paragraph/paragraph-graph.html        | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index 8b75e089c10..3cd0ddb6265 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -59,4 +59,11 @@
       <span>Maps require internet connectivity.</span>
     </span>
   </div>
+
+  <div ng-if="getGraphMode()=='forceLayout'"
+       id="p{{paragraph.id}}_forceLayout"
+       class="forceLayout">
+    <svg></svg>
+  </div>
+
 </div>

From 4b7d49b3ac9e7d375e449dc16d89ec3576b2e8a5 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Tue, 5 Jul 2016 16:16:02 +0300
Subject: [PATCH 3/8] add column drop boxes for column selection for source and
 destination nodes

---
 .../notebook/paragraph/paragraph-pivot.html   | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 9ddf9820640..e3d1d682619 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -32,7 +32,7 @@
     </ul>
   </div>
 
-  <div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='map'">
+  <div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='map' && getGraphMode()!='forceLayout'">
     <div class="col-md-4">
       <span class="columns lightBold">
         Keys
@@ -213,4 +213,71 @@
       </span>
     </div>
   </div>
+
+  <div class="row" ng-if="getGraphMode()=='forceLayout'">
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        Source
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.forceLayout.source"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.forceLayout.source">
+            <div class="btn btn-primary btn-xs">
+              {{paragraph.config.graph.forceLayout.source.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSource($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        Source Group
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.forceLayout.sourceGroup"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.forceLayout.sourceGroup">
+            <div class="btn btn-success btn-xs">
+              {{paragraph.config.graph.forceLayout.sourceGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSourceGroup($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        Destination
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.forceLayout.dest"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.forceLayout.dest">
+            <div class="btn btn-info btn-xs">
+              {{paragraph.config.graph.forceLayout.dest.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDest($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+    <div class="col-md-3">
+      <span class="columns lightBold">
+        Destination Group
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.forceLayout.destGroup"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.forceLayout.destGroup">
+            <div class="btn btn-warning btn-xs">
+              {{paragraph.config.graph.forceLayout.destGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDestGroup($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
 </div>

From 6e7a695b8c83f1eafc36f2e18d97a782a64152ef Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Tue, 5 Jul 2016 16:16:22 +0300
Subject: [PATCH 4/8] add force layout rendering and column selection handling
 methods

---
 .../paragraph/paragraph.controller.js         | 193 +++++++++++++++++-
 1 file changed, 190 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index bd3b6b3c945..6329ae04314 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1054,7 +1054,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   var setD3Chart = function(type, data, refresh) {
-    if (!$scope.chart[type]) {
+    if (!$scope.chart[type] && type !== 'forceLayout') {
       var chart = nv.models[type]();
       $scope.chart[type] = chart;
     }
@@ -1087,6 +1087,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       $scope.chart[type].showDistX(true)
         .showDistY(true);
       //handle the problem of tooltip not showing when muliple points have same value.
+    } else if (type === 'forceLayout') {
+      var forceLayoutData = setForceLayoutData(data, 1000);
     } else {
       var p = pivot(data);
       if (type === 'pieChart') {
@@ -1158,11 +1160,140 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       nv.utils.windowResize($scope.chart[type].update);
     };
 
+    var renderForceLayout = function() {
+      var color = d3.scale.category10();
+      var r = 5;
+      var margin = {top: -5, right: -5, bottom: -5, left: -5};
+      var height = $scope.paragraph.config.graph.height;
+      var width = angular.element('#p' + $scope.paragraph.id + '_' + 'resize').width();
+
+      function zoomed() {
+        container.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
+      }
+
+      function dragstarted(d) {
+        d3.event.sourceEvent.stopPropagation();
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', true);
+        force.start();
+      }
+
+      function dragged(d) {
+        /*jshint validthis:true */
+        d3.select(this).attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
+      }
+
+      function dragended(d) {
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', false);
+      }
+
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg g').remove();
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' div.tooltip').remove();
+
+      if (forceLayoutData) {
+        var force = d3.layout.force()
+          .charge(-120)
+          .linkDistance(30)
+          .size([width, height]);
+
+        var zoom = d3.behavior.zoom()
+          .scaleExtent([0, 10])
+          .on('zoom', zoomed);
+
+        var drag = d3.behavior.drag()
+          .origin(function(d) { return d; })
+          .on('dragstart', dragstarted)
+          .on('drag', dragged)
+          .on('dragend', dragended);
+
+        var svg = d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg')
+          .attr('width', width)
+          .attr('height', height)
+          .append('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')')
+          .call(zoom);
+
+        var tooltip = d3.select('#p' + $scope.paragraph.id + '_' + type).append('div')
+          .attr('class', 'tooltip')
+          .style('opacity', 0);
+
+        var rect = svg.append('rect')
+          .attr('width', width)
+          .attr('height', height)
+          .style('fill', 'none')
+          .style('pointer-events', 'all');
+
+        var container = svg.append('g')
+          .attr('class', 'container');
+
+        force.nodes(forceLayoutData.nodes)
+          .links(forceLayoutData.links)
+          .start();
+
+        var link = container.append('g')
+          .attr('class', 'links')
+          .selectAll('.link')
+          .data(forceLayoutData.links)
+          .enter().append('line')
+          .attr('class', 'link')
+          .style('stroke-width', function(d) { return Math.sqrt(d.value); });
+
+        var node = container.append('g')
+          .attr('class', 'nodes')
+          .selectAll('.node')
+          .data(forceLayoutData.nodes)
+          .enter().append('g')
+          .attr('class', 'node')
+          .attr('cx', function(d) { return d.x; })
+          .attr('cy', function(d) { return d.y; })
+          .call(drag);
+
+        node.append('circle')
+          .attr('r', r)
+          .style('fill', function(d) { return color(d.group); });
+
+        node.on('mouseover', function(d) {
+          console.log(d.group);
+          var offsetX = d3.transform(container.attr('transform')).translate[0];
+          var offsetY = d3.transform(container.attr('transform')).translate[1];
+          var scale = d3.transform(container.attr('transform')).scale[0];
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0.9);
+          tooltip.html('<strong>name: <span class=\'tooltip-text\'>' + d.name + '</span><br>' +
+                       'group: <span class=\'tooltip-text\'>' + d.group + '</span></strong>')
+            .style('left', (d.px*scale + offsetX + 15) + 'px')
+            .style('top', (d.py*scale + offsetY - 18) + 'px');
+        })
+        .on('mouseout', function(d) {
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0);
+        });
+
+        force.on('tick', function() {
+          link.attr('x1', function(d) { return d.source.x; })
+              .attr('y1', function(d) { return d.source.y; })
+              .attr('x2', function(d) { return d.target.x; })
+              .attr('y2', function(d) { return d.target.y; });
+
+          node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
+        });
+      } else {
+        throw new Error('No data available');
+      }
+    };
+
     var retryRenderer = function() {
       if (angular.element('#p' + $scope.paragraph.id + '_' + type + ' svg').length !== 0) {
         try {
-          renderChart();
-        } catch (err) {
+          if (type !== 'forceLayout') {
+            renderChart();
+          } else {
+            renderForceLayout();
+          }
+        } catch(err) {
           console.log('Chart drawing error %o', err);
         }
       } else {
@@ -1482,6 +1613,30 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
   };
 
+  $scope.removeForceLayoutOptionSource = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.source = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionSourceGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.sourceGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDest = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.dest = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDestGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.destGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
   /* Clear unknown columns from graph option */
   var clearUnknownColsFromGraphOption = function() {
     var unique = function(list) {
@@ -2034,6 +2189,38 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     };
   };
 
+  var setForceLayoutData = function(data, limit) {
+    try {
+      var source = $scope.paragraph.config.graph.forceLayout.source;
+      var dest = $scope.paragraph.config.graph.forceLayout.dest;
+      var sourceGroup = $scope.paragraph.config.graph.forceLayout.sourceGroup;
+      var destGroup = $scope.paragraph.config.graph.forceLayout.destGroup;
+      var nodes = [];
+      var links = [];
+      var nodesMap = {};
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          if (!(row[source.index] in nodesMap)) {
+            nodesMap[row[source.index]] = nodes.length;
+            nodes.push({ name: row[source.index], group: row[sourceGroup.index]});
+          }
+          if (!(row[dest.index] in nodesMap)) {
+            nodesMap[row[dest.index]] = nodes.length;
+            nodes.push({ name: row[dest.index], group: row[destGroup.index]});
+          }
+        }
+      });
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          links.push({ source: nodesMap[row[source.index]], target: nodesMap[row[dest.index]], value: 1 });
+        }
+      });
+      return { nodes: nodes, links: links };
+    } catch(e) {
+      console.log(e.name + ': ' + e.message);
+    }
+  };
+
   var isDiscrete = function(field) {
     var getUnique = function(f) {
       var uniqObj = {};

From addd4afc1cca051fcb99f5c8ab7fa1f5a0fbe8f7 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Tue, 5 Jul 2016 16:16:36 +0300
Subject: [PATCH 5/8] add CSS for force layout and tooltip

---
 .../src/app/notebook/paragraph/paragraph.css  | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 0b821c94181..f46a4f66ebe 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -528,3 +528,45 @@ table.table-striped {
   padding-left: 4px !important;
   width: 20px;
 }
+
+/*
+  Force Layout CSS
+*/
+
+.node {
+        stroke: #999;
+        stroke-width: 1.5px;
+    }
+
+.link {
+    stroke: #999;
+    stroke-opacity: .6;
+}
+
+.forceLayout div.tooltip {
+    position: absolute;
+    text-align: center;
+    width: auto;
+    padding: 4px 6px 4px 6px;
+    font: 12px sans-serif;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    border: 0px;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.forceLayout div.tooltip:before {
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-right: 6px solid rgba(0, 0, 0, 0.75);
+    content: "";
+    position: absolute;
+    z-index: 99;
+    left: -6px;
+    top: 11px;
+}
+
+.forceLayout .tooltip-text {
+    color: orangered;
+}

From 752923ab64b898d350e77cccf869bf475b1e8550 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Mon, 11 Jul 2016 11:40:30 +0300
Subject: [PATCH 6/8] fix linting errors

---
 .../notebook/paragraph/paragraph.controller.js   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 6329ae04314..6e7f8a02870 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1263,8 +1263,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
             .style('opacity', 0.9);
           tooltip.html('<strong>name: <span class=\'tooltip-text\'>' + d.name + '</span><br>' +
                        'group: <span class=\'tooltip-text\'>' + d.group + '</span></strong>')
-            .style('left', (d.px*scale + offsetX + 15) + 'px')
-            .style('top', (d.py*scale + offsetY - 18) + 'px');
+            .style('left', (d.px * scale + offsetX + 15) + 'px')
+            .style('top', (d.py * scale + offsetY - 18) + 'px');
         })
         .on('mouseout', function(d) {
           tooltip.transition()
@@ -1293,7 +1293,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
           } else {
             renderForceLayout();
           }
-        } catch(err) {
+        } catch (err) {
           console.log('Chart drawing error %o', err);
         }
       } else {
@@ -2202,21 +2202,21 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         if (index < limit) {
           if (!(row[source.index] in nodesMap)) {
             nodesMap[row[source.index]] = nodes.length;
-            nodes.push({ name: row[source.index], group: row[sourceGroup.index]});
+            nodes.push({name: row[source.index], group: row[sourceGroup.index]});
           }
           if (!(row[dest.index] in nodesMap)) {
             nodesMap[row[dest.index]] = nodes.length;
-            nodes.push({ name: row[dest.index], group: row[destGroup.index]});
+            nodes.push({name: row[dest.index], group: row[destGroup.index]});
           }
         }
       });
       angular.forEach(data.rows, function(row, index) {
         if (index < limit) {
-          links.push({ source: nodesMap[row[source.index]], target: nodesMap[row[dest.index]], value: 1 });
+          links.push({source: nodesMap[row[source.index]], target: nodesMap[row[dest.index]], value: 1});
         }
       });
-      return { nodes: nodes, links: links };
-    } catch(e) {
+      return {nodes: nodes, links: links};
+    } catch (e) {
       console.log(e.name + ': ' + e.message);
     }
   };

From 746e1bd7a86494894675a2c7b020ead673fde8e8 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Mon, 25 Jul 2016 15:45:38 +0300
Subject: [PATCH 7/8] remove console.log and unused variable

---
 .../src/app/notebook/paragraph/paragraph.controller.js         | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 6e7f8a02870..118f69ad9c2 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1218,7 +1218,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
           .attr('class', 'tooltip')
           .style('opacity', 0);
 
-        var rect = svg.append('rect')
+        svg.append('rect')
           .attr('width', width)
           .attr('height', height)
           .style('fill', 'none')
@@ -1254,7 +1254,6 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
           .style('fill', function(d) { return color(d.group); });
 
         node.on('mouseover', function(d) {
-          console.log(d.group);
           var offsetX = d3.transform(container.attr('transform')).translate[0];
           var offsetY = d3.transform(container.attr('transform')).translate[1];
           var scale = d3.transform(container.attr('transform')).scale[0];

From 76fcdc26bb03829776c17c807a8ec8ef50908cb6 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Sun, 21 Aug 2016 11:03:18 +0300
Subject: [PATCH 8/8] add no available data message to force layout rendering

---
 .../app/notebook/paragraph/paragraph.controller.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 118f69ad9c2..2993d46559f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1189,6 +1189,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       }
 
       d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg g').remove();
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg text').remove();
       d3.select('#p' + $scope.paragraph.id + '_' + type + ' div.tooltip').remove();
 
       if (forceLayoutData) {
@@ -1280,7 +1281,18 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
           node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
         });
       } else {
-        throw new Error('No data available');
+        // create 'No available data' svg message instead of graph when no data is available
+        var svg = d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg')
+                  .attr('width', width)
+                  .attr('height', height)
+                  .append('text')
+                  .attr('x', width / 2)
+                  .attr('y', height / 2)
+                  .attr('text-anchor', 'middle')
+                  .attr('dominant-baseline', 'middle')
+                  .style('font-size', '18px')
+                  .style('font-weight', 'bold')
+                  .text('No available data (choose fields in settings)');
       }
     };