Merge pull request #149 from lucymukh/lucymu/barWidthDensityPlot

iddBarWidth binding for markers works with plot coordinates now
predictionmachines · May 30, 2018 · 3e4b135 · 3e4b135
2 parents 2757953 + 9412f65
commit 3e4b135
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 30 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,3 +1,8 @@
+### 1.5.10 (May 29, 2018)
+
+Bug fixed:
+ - iddBarWidth binding for markers works with plot coordinates now
+
 ### 1.5.9 (May 21, 2018)
 
 Bug fixed:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "interactive-data-display",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "license": "Apache-2.0",
   "homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",
   "description": "A JavaScript visualization library for dynamic data",

diff --git a/samples/KO.Bars.html b/samples/KO.Bars.html
@@ -22,6 +22,7 @@
             this.A_Height = ko.observable(1);
             this.B_Height = ko.observable(6);
             this.C_Height = ko.observable(3);
+            this.Xlog = ko.observable(false);
 
             this.BarHeights = ko.computed(function() {
                 return [this.A_Height(),this.B_Height(),this.C_Height()];
@@ -36,26 +37,28 @@
     </script>
 </head>
 <body>
+    <p>X log axis <input type="checkbox" data-bind="checked: Xlog"></p>
     <div style="display: inline-block">
-    <div id="chart" data-idd-plot="chart" style="width: 600px; height: 400px; float:left">
-		<div data-idd-plot="markers"
-             data-bind="
-				iddX: [1,2,3],
-				iddY: BarHeights,
-                iddColor: ['red','blue','green'],                
-                iddBarWidth: 0.9,
-                iddShadow: 'grey',
-                iddShape: 'bars',
-                iddPlotName: 'Bars'
-				">
+        <div id="chart" data-idd-plot="chart" style="width: 600px; height: 400px; float:left">
+            <div data-idd-plot="markers"
+                data-bind="
+                    iddX: [1,2,3],
+                    iddY: BarHeights,
+                    iddColor: ['red','blue','green'],                
+                    iddBarWidth: 0.05,
+                    iddShadow: 'grey',
+                    iddShape: 'bars',
+                    iddPlotName: 'Bars',
+                    iddXlog: Xlog
+                    ">
+            </div>
+        </div>
+        <div style="float: right; margin: 2em">
+            <p>Height 1:<input data-bind="value: A_Height" type="number" min="1" max="20"></p>
+            <p>Height 2:<input data-bind="value: B_Height" type="number" min="1" max="20"></p>
+            <p>Height 3:<input data-bind="value: C_Height" type="number" min="1" max="20"></p>
+            </p>        
         </div>
-	</div>
-    <div style="float: right; margin: 2em">
-        <p>Height 1:<input data-bind="value: A_Height" type="number" min="1" max="20"></p>
-        <p>Height 2:<input data-bind="value: B_Height" type="number" min="1" max="20"></p>
-        <p>Height 3:<input data-bind="value: C_Height" type="number" min="1" max="20"></p>
-        </p>        
-    </div>
     </div>
 </body>
 </html>
diff --git a/src/idd/idd.base.js b/src/idd/idd.base.js
@@ -2230,8 +2230,8 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
             c.height = finalRect.height;
         };
 
-        // Gets the transform functions from data to screen coordinates.
-        // Returns { dataToScreenX, dataToScreenY }
+        // Gets transform functions from data to screen coordinates, from plot to screen coords
+        // Returns { dataToScreenX, dataToScreenY, plotToScreenX, plotToScreenY}
         this.getTransform = function () {
             var ct = this.coordinateTransform;
             var plotToScreenX = ct.plotToScreenX;
@@ -2241,7 +2241,10 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
             var dataToScreenX = dataToPlotX ? function (x) { return plotToScreenX(dataToPlotX(x)); } : plotToScreenX;
             var dataToScreenY = dataToPlotY ? function (y) { return plotToScreenY(dataToPlotY(y)); } : plotToScreenY;
 
-            return { dataToScreenX: dataToScreenX, dataToScreenY: dataToScreenY };
+            return {
+                dataToScreenX: dataToScreenX, dataToScreenY: dataToScreenY,
+                plotToScreenX: plotToScreenX,  plotToScreenY: plotToScreenY
+            };
         };
 
         // Gets the transform functions from screen to data coordinates.

diff --git a/src/idd/idd.markers.js b/src/idd/idd.markers.js
@@ -61,10 +61,12 @@ InteractiveDataDisplay.Markers = function (div, master) {
         }
         return { arrays: arrays, scalars: scalars, length: n === -1 ? 0 : n };
     }
+
     //return copy of data
     this.getDataCopy = function () {
         return _originalData;
     }
+
     // Draws the data as markers.
     this.draw = function (data, titles) {
         if(data == undefined || data == null) throw "The argument 'data' is undefined or null";
@@ -77,7 +79,7 @@ InteractiveDataDisplay.Markers = function (div, master) {
         else if(typeof data.shape === "string") {
             shape = InteractiveDataDisplay.Markers.shapes[data.shape];
             if(shape == undefined) throw "The given marker shape is unknown";
-        }else if(typeof data.shape === "object" && data.shape != null && typeof data.shape.draw === "function") {
+        } else if(typeof data.shape === "object" && data.shape != null && typeof data.shape.draw === "function") {
             shape = data.shape;
         }
         else throw "The argument 'data' is incorrect: value of the property 'shape' must be a string, a MarkerShape object, undefined or null";

diff --git a/src/idd/idd.markers.uncertain.js b/src/idd/idd.markers.uncertain.js
@@ -1203,8 +1203,7 @@ InteractiveDataDisplay.Bars = {
         }
     },
     draw: function (marker, plotRect, screenSize, transform, context) {
-        var barWidth = 0.5 * marker.barWidth;
-        var xLeft, xRight, yTop, yBottom;
+        var xLeft, xRight, yTop, yBottom, barWidthScreenX, barWidthScreenY;
         if (marker.orientation == "h") {
             xLeft = transform.dataToScreenX(0);
             xRight = transform.dataToScreenX(marker.x);
@@ -1214,15 +1213,17 @@ InteractiveDataDisplay.Bars = {
                 xLeft = k;
             }
             if (xLeft > screenSize.width || xRight < 0) return;
-            yTop = transform.dataToScreenY(marker.y + barWidth);
-            yBottom = transform.dataToScreenY(marker.y - barWidth);
+            barWidthScreenY = transform.plotToScreenY(marker.barWidth) - transform.plotToScreenY(0.0);
+            yBottom = transform.dataToScreenY(marker.y) - barWidthScreenY / 2.0;
+            yTop = transform.dataToScreenY(marker.y) + barWidthScreenY / 2.0;
             if (yTop > screenSize.height || yBottom < 0) return;
         } else {
-            xLeft = transform.dataToScreenX(marker.x - barWidth);
-            xRight = transform.dataToScreenX(marker.x + barWidth);
+            barWidthScreenX = transform.plotToScreenX(marker.barWidth) - transform.plotToScreenX(0.0);
+            xLeft = transform.dataToScreenX(marker.x) - barWidthScreenX / 2.0;
+            xRight = transform.dataToScreenX(marker.x) + barWidthScreenX / 2.0;
             if (xLeft > screenSize.width || xRight < 0) return;
-            yTop = transform.dataToScreenY(marker.y);
             yBottom = transform.dataToScreenY(0);
+            yTop = transform.dataToScreenY(marker.y);
             if (yTop > yBottom) {
                 var k = yBottom;
                 yBottom = yTop;