[viz] Axis fix for histogram and distribution chart (#569)

* Fix plots going over and under Y axis ticks
whylabs · May 20, 2022 · d092535 · d092535
1 parent 8efd7ec
commit d092535
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html
@@ -325,14 +325,12 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
         const minY = Math.abs(d3.min(data));
         let positiveY = Math.ceil(maxY) % 1 ? maxY + 2*(maxY/(maxY*10)) : maxY + 2*(maxY/(maxY/10)),
             negativeY = Math.ceil(minY) % 1 ? minY + 2*(minY/(minY*10)) : minY + 2*(minY/(minY/10));
-
         const yScale = d3.scaleLinear()
-            .domain([-negativeY, positiveY || 0])
             .range([CHART_HEIGHT,0])
-
+            .domain([-negativeY*1.2, positiveY*1.2 || 0])
+            .nice()
         const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0);
         const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 30, yFormat);
-        yFormat = yScale.tickFormat(100, yFormat);
 
           svgEl.append("g")
           .attr("transform", `translate(${MARGIN.LEFT}, 0)`)

diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html
@@ -243,18 +243,19 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
 
           this.xScale = d3
               .scaleLinear()
-         .domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisX); }),(this.maxTargetXValue+this.targetBinWidth >= this.maxReferenceXValue+this.referenceBinWidth) ? this.maxTargetXValue+this.targetBinWidth:this.maxReferenceXValue+this.referenceBinWidth])     // I was too lazy to do basic math of max(bin_start + width for each distribution)
+         .domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisX); }),(this.maxTargetXValue+this.targetBinWidth >= this.maxReferenceXValue+this.referenceBinWidth) ? this.maxTargetXValue+this.targetBinWidth:this.maxReferenceXValue+this.referenceBinWidth])
          .range([0, this.CHART_WIDTH ]);
 
          this.svgEl.append("g")
              .attr("transform", "translate("+ this.MARGIN.LEFT +"," + this.SVG_HEIGHT + ")")
              .call(d3.axisBottom(this.xScale));
           this.yScale = d3.scaleLinear()
               .range([this.CHART_HEIGHT , 0])
-              this.yScale.domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisY); }), d3.max(this.charts2, function(d) { return parseFloat(d.axisY); })]);
+              .domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisY); }), d3.max(this.charts2, function(d) { return parseFloat(d.axisY); })*1.2])
+              .nice();
         }
       }
-
+      
       function chartData(column) {
         const data = [];
         if (column.numberSummary?.histogram) {
@@ -300,8 +301,7 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
         } = sizes
 
         const rectColors = ["#44C0E7", "#F5843C"]
-        const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat);
-        yFormat = yScale.tickFormat(100, yFormat);
+        const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40);
 
         svgEl.append("g")
           .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.BOTTOM})`)