Non stacked 2D histograms (vmware-archive#604)

* First visualization of non-stacked 2D histograms * Added new views to user manual
mnozhchev · May 26, 2020 · ee26847 · ee26847
1 parent 14e21b8
commit ee26847
Show file tree

Hide file tree

Showing 33 changed files with 730 additions and 208 deletions.
diff --git a/docs/hillview-heatmap-array-small.png b/docs/hillview-heatmap-array-small.png
diff --git a/docs/hillview-heatmap-small.png b/docs/hillview-heatmap-small.png
diff --git a/docs/hillview-histogram-array-small.png b/docs/hillview-histogram-array-small.png
diff --git a/docs/hillview-histogram-normalized-small.png b/docs/hillview-histogram-normalized-small.png
diff --git a/docs/hillview-histogram-small.png b/docs/hillview-histogram-small.png
diff --git a/docs/hillview-histogram.png b/docs/hillview-histogram.png
diff --git a/docs/hillview-histogram2d-small.png b/docs/hillview-histogram2d-small.png
diff --git a/docs/histogram-quartiles-view-small.png b/docs/histogram-quartiles-view-small.png
diff --git a/docs/non-stacked-2d-histogram-small.png b/docs/non-stacked-2d-histogram-small.png
diff --git a/docs/non-stacked-2d-histogram.png b/docs/non-stacked-2d-histogram.png
diff --git a/docs/pie-chart.png b/docs/pie-chart.png
diff --git a/docs/quartile-labeled.png b/docs/quartile-labeled.png
diff --git a/docs/quartile-view-menu.png b/docs/quartile-view-menu.png
diff --git a/docs/quartiles-selection.png b/docs/quartiles-selection.png
diff --git a/docs/singular-value-spectrum-small.png b/docs/singular-value-spectrum-small.png
diff --git a/docs/trellis-histogram2d-array-small.png b/docs/trellis-histogram2d-array-small.png
diff --git a/docs/userManual.md b/docs/userManual.md
diff --git a/docs/userManual.src b/docs/userManual.src
@@ -1039,6 +1039,22 @@ only displays the 200 most frequent elements results, and alerts the user to the
 of further frequent elements. These can be viewed using the All frequent elements option from the
  [View as a table](#view-as-a-table) menu option.
 
+## Charts
+
+Hillview supports many types of charts; these are described in the following sections:
+
+[![One dimensional histogram](hillview-histogram-small.png)](#uni-dimensional-histogram-views)
+[![Pie charts](pie-chart.png)](#uni-dimensional-histogram-views)
+[![Histograms of quartiles](histogram-quartiles-view-small.png)](#quartiles-view-for-histogram-buckets)
+[![Stacked two dimensional histograms](hillview-histogram2d-small.png)](#two-dimensional-histogram-views)
+[![Non-stacked two dimensional histograms](non-stacked-2d-histogram-small.png)](#two-dimensional-histogram-views)
+[![Normalized stacked two dimensional histograms](hillview-histogram-normalized-small.png)](#two-dimensional-histogram-views)
+[![Heatmaps](hillview-heatmap-small.png)](#heatmap-views)
+[![Singular value spectrum](singular-value-spectrum-small.png)](#singular-value-spectrum-views)
+[![Trellis plots of 1D histograms](hillview-histogram-array-small.png)](#trellis-plots-of-1d-histograms)
+[![Trellis plots of 2D histograms](trellis-histogram2d-array-small.png)](#trellis-plots-of-2d-histograms)
+[![Trellis plots of heatmaps](hillview-heatmap-array-small.png)](#trellis-plots-of-heatmaps)
+
 ### Uni-dimensional histogram views
 
 A uni-dimensional (1D) histogram is a succinct representation of the
@@ -1076,6 +1092,7 @@ how many of the data points in the displayed column are smaller than X.
 
 Next to the mouse an overlay box displays the following values:
 * the mouse's position on the X axis
+* the description of the histogram bucket where the mouse is
 * the mouse's position on the Y axis
 * the size of the histogram bar at the current X coordinate
 * the value of the CDF function at the current X coordinate of the mouse, in percents
@@ -1176,7 +1193,28 @@ some of the tick labels are displayed.
 
 ![Histogram quartiles view](histogram-quartiles-view.png)
 
-*TODO*
+This view displays data from two columns:
+
+* one column is used to define the buckets on the X axis, as in a histogram view
+* the second column must be a numeric or date column; the range of the data in the
+  second column is displayed using a whisker box for each bucket.  The following image describes how to read a whisker box.
+
+![How to read a whisker box](quartile-labeled.png)
+
+The "view" menu for a quartile plot offers the following operations:
+
+![View menu](quartile-view-menu.png)
+
+* refresh: redraw the plot
+* table: display the data in the plot as an image
+* heatmap: show the data in the two columns as a heatmap
+* histogram: show the histogram of the data on the X axis buckets
+* 2D histogram: show the data in the two columns as a 2D histogram
+
+In addition, users can select a rectangular portion of the plot to filter
+the data only to the selected region:
+
+![Selecting from a quartile view](quartiles-selection.png)
 
 ### Two-dimensional histogram views
 
@@ -1189,8 +1227,8 @@ distribution in a second column.
 For example, in the following figure we see a 2D histogram where the X
 axis has the airline carriers.  For each carrier the bar is divided
 into sub-bars, each of which corresponding to a range of arrival
-delays.  The color legend at the top shows the encoding of arrival delays into
-colors.
+delays.  The color legend at the top shows the encoding of arrival
+delays into colors.
 
 ![A two-dimensional histogram](hillview-histogram2d.png)
 
@@ -1253,6 +1291,19 @@ The "view" menu for a 2D histogram offers the following operations:
 * swap axes: Draws a new 2D histogram where the two columns are
   swapped.
 
+* quartiles: Display the data as a [histogram of
+  quartiles](#quartiles-view-for-histogram-buckets)
+
+* stacked/parallel: Alternate between stacked bars and non-stacked
+  bars.  For this option to be enabled the number of drawn bars has to
+  be small enough to fit on the screen; the user may have
+  to change the number of buckets to enable this menu item.
+
+![2D histogram display without stacked bars](non-stacked-2d-histogram.png)
+
+  Note that selection in non-stacked histograms will only select whole
+  buckets on the X axis.
+
 * heatmap: Displays a [heat map](#heatmap-views) of the data using the
   same two columns as in the current histogram.
 

diff --git a/web/src/main/webapp/dataViews/axisData.ts b/web/src/main/webapp/dataViews/axisData.ts
@@ -152,6 +152,11 @@ export class AxisDescription {
     }
 }
 
+// This value represents the index of the bucket with missing data.
+export const MissingBucketIndex = -1;
+// This value indicates that some data does not fall within a bucket.
+export const NoBucketIndex = null;
+
 /**
  * Contains all information required to build an axis and a d3 scale associated to it.
  */
@@ -233,14 +238,12 @@ export class AxisData {
         let actualMin = this.displayRange.min;
         let actualMax = this.displayRange.max;
         let adjust = .5;
-        /*
         if (axisKind === AxisKind.Legend && AxisData.needsAdjustment(this.description.kind)) {
             // These were adjusted, bring them back.
             actualMin += .5;
             actualMax -= .5;
             adjust = 0;
         }
-        */
         // on vertical axis the direction is swapped
         const domain = bottom ? [actualMin, actualMax] : [actualMax, actualMin];
 
@@ -359,8 +362,7 @@ export class AxisData {
     }
 
     public bucketBoundaries(bucket: number): BucketBoundaries {
-        if (bucket === -1)
-            // The bucket with index -1 represents the missing data.
+        if (bucket === MissingBucketIndex)
             return new BucketBoundaries(new BucketBoundary("missing", "String", true), null);
         if (bucket === null || bucket < 0 || bucket >= this.bucketCount)
             return new BucketBoundaries(null, null);
@@ -425,11 +427,11 @@ export class AxisData {
     }
 
     /**
-     * @param bucket   Bucket number.  -1 for the missing data buckets.
+     * @param bucket   Bucket number.  MissingBucketIndex for the missing data buckets.
      * @param maxChars Maximum number of characters to use for description; if 0 it is unlimited.
      * @returns  A description of the boundaries of the specified bucket.
      */
-    public bucketDescription(bucket: number, maxChars: number): string {
+    public bucketDescription(bucket: number | null, maxChars: number): string {
         return this.bucketBoundaries(bucket).toString(maxChars);
     }
 }
diff --git a/web/src/main/webapp/dataViews/dataRangesCollectors.ts b/web/src/main/webapp/dataViews/dataRangesCollectors.ts
@@ -458,7 +458,10 @@ export class DataRangesReceiver extends OnCompleteReceiver<BucketsInfo[]> {
                         Math.floor(chartSize.width / Resolution.minBarWidth),
                         Resolution.maxBucketCount);
                 }
-                const maxYBucketCount = Resolution.maxBucketCount;
+                let maxYBucketCount = this.bucketCounts[1];
+                if (maxYBucketCount === 0) {
+                    maxYBucketCount = Resolution.maxBucketCount;
+                }
 
                 // The first two represent the resolution for the 2D histogram
                 const xarg = DataRangesReceiver.computeHistogramArgs(