Configurable minimum and maximum sizes for dot-size graphs (#2849)

Sorry for the delay on this... It took me a while to confirm this PR again. I don;t know why I didn't merge it at the time I reviewed it. Looks great to me!

docs/graph3d/index.html

@@ -386,6 +386,24 @@ var options = {
       <td>Ratio of the size of the dots with respect to the width of the graph.</td>
     </tr>
 
+    <tr>
+      <td>dotSizeMinFraction</td>
+      <td>number</td>
+      <td>0.5</td>
+      <td>Size of minimum-value dot as a fraction of dotSizeRatio.
+          Applicable when using style <code>dot-size</code>.</td>
+      </td>
+    </tr>
+
+    <tr>
+      <td>dotSizeMaxFraction</td>
+      <td>number</td>
+      <td>2.5</td>
+      <td>Size of maximum-value dot as a fraction of dotSizeRatio.
+          Applicable when using style <code>dot-size</code>.</td>
+      </td>
+    </tr>
+
     <tr>
       <td>gridColor</td>
       <td>string</td>

examples/graph3d/08_dot_cloud_size.html

@@ -49,7 +49,9 @@
           horizontal: -0.54,
           vertical: 0.5,
           distance: 1.6
-        }
+        },
+        dotSizeMinFraction: 0.5,
+        dotSizeMaxFraction: 2.5
       };
 
       // create our graph

lib/graph3d/Graph3d.js

@@ -53,7 +53,10 @@ var DEFAULTS = {
   showShadow       : false,
   keepAspectRatio  : true,
   verticalRatio    : 0.5,    // 0.1 to 1.0, where 1.0 results in a 'cube'
-  dotSizeRatio     : 0.02,   // size of the dots as a fraction of the graph width
+
+  dotSizeRatio      : 0.02,  // size of the dots as a fraction of the graph width
+  dotSizeMinFraction: 0.5,	 // size of min-value dot as a fraction of dotSizeRatio	
+  dotSizeMaxFraction: 2.5,	 // size of max-value dot as a fraction of dotSizeRatio	
 
   showAnimationControls: autoByDefault,
   animationInterval    : 1000, // milliseconds
@@ -1014,7 +1017,8 @@ Graph3d.prototype._getLegendWidth = function() {
 
   if (this.style === Graph3d.STYLE.DOTSIZE) {
     var dotSize = this._dotSize();
-    width =  dotSize / 2 + dotSize * 2;
+    //width =  dotSize / 2 + dotSize * 2;
+    width =  dotSize * this.dotSizeMaxFraction;
   } else if (this.style === Graph3d.STYLE.BARSIZE) {
     width = this.xBarWidth ;
   } else {
@@ -1086,8 +1090,8 @@ Graph3d.prototype._redrawLegend = function() {
     // draw the size legend box
     var  widthMin;
     if (this.style === Graph3d.STYLE.DOTSIZE) {
-      var dotSize = this._dotSize();
-      widthMin = dotSize / 2; // px
+      // Get the proportion to max and min right
+      widthMin = width * (this.dotSizeMinFraction / this.dotSizeMaxFraction);
     } else if (this.style === Graph3d.STYLE.BARSIZE) {
       //widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues
     }
@@ -1096,7 +1100,7 @@ Graph3d.prototype._redrawLegend = function() {
     ctx.beginPath();
     ctx.moveTo(left, top);
     ctx.lineTo(right, top);
-    ctx.lineTo(right - width + widthMin, bottom);
+    ctx.lineTo(left + widthMin, bottom);
     ctx.lineTo(left, bottom);
     ctx.closePath();
     ctx.fill();
@@ -1821,10 +1825,14 @@ Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
  * Draw single datapoint for graph style 'dot-size'.
  */
 Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
-  var dotSize  = this._dotSize();
-  var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
-  var size     = dotSize/2 + 2*dotSize * fraction;
-  var colors   = this._getColorsSize();
+  var dotSize   = this._dotSize();
+  var fraction  = (point.point.value - this.valueRange.min) / this.valueRange.range();
+
+  var sizeMin   = dotSize*this.dotSizeMinFraction;
+  var sizeRange = dotSize*this.dotSizeMaxFraction - sizeMin;
+  var size      = sizeMin + sizeRange*fraction;
+
+  var colors    = this._getColorsSize();
 
   this._drawCircle(ctx, point, colors.fill, colors.border, size);
 };

lib/graph3d/Settings.js

@@ -63,6 +63,8 @@ var OPTIONKEYS = [
   'keepAspectRatio',
   'verticalRatio',
   'dotSizeRatio',
+  'dotSizeMinFraction',
+  'dotSizeMaxFraction',
   'showAnimationControls',
   'animationInterval',
   'animationPreload',