Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add true log scale to line chart #1507

Merged
merged 4 commits into from
Oct 24, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion tensorboard/components/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ tf_web_library(

tensorboard_html_binary(
name = "index",
compile = True,
input_path = "/tensorboard.html",
output_path = "/index.html",
deps = [":tensorboard"],
Expand Down
1 change: 0 additions & 1 deletion tensorboard/components/tf_tensorboard/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ tf_web_library(
"//tensorboard/plugins/graph/tf_graph_dashboard",
"//tensorboard/plugins/histogram/tf_histogram_dashboard",
"//tensorboard/plugins/image/tf_image_dashboard",
"//tensorboard/plugins/interactive_inference/tf_interactive_inference_dashboard",
"//tensorboard/plugins/pr_curve/tf_pr_curve_dashboard",
"//tensorboard/plugins/profile/tf_profile_dashboard",
"//tensorboard/plugins/projector/vz_projector",
Expand Down
1 change: 0 additions & 1 deletion tensorboard/components/tf_tensorboard/default-plugins.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,3 @@
<link rel="import" href="../tf-pr-curve-dashboard/tf-pr-curve-dashboard.html">
<link rel="import" href="../tf-profile-dashboard/tf-profile-dashboard.html">
<link rel="import" href="../tf-beholder-dashboard/tf-beholder-dashboard.html">
<link rel="import" href="../tf-interactive-inference-dashboard/tf-interactive-inference-dashboard.html">
5 changes: 4 additions & 1 deletion tensorboard/components/vz_line_chart2/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ licenses(["notice"]) # Apache 2.0
tf_web_library(
name = "vz_line_chart2",
srcs = [
"line-chart.ts",
"line-chart-exporter.ts",
"line-chart.ts",
"linear-scale.ts",
"log-scale.ts",
"panZoomDragLayer.html",
"panZoomDragLayer.ts",
"tf-scale.ts",
"vz-line-chart2.html",
"vz-line-chart2.ts",
],
Expand Down
58 changes: 38 additions & 20 deletions tensorboard/components/vz_line_chart2/line-chart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ enum TooltipColumnEvalType {
DOM,
}

enum YScaleType {
LOG = 'log',
LINEAR = 'linear',
}

export type LineChartStatus = {
smoothingEnabled: boolean
};
Expand Down Expand Up @@ -60,7 +65,7 @@ export class LineChart {

private xAccessor: Plottable.IAccessor<number|Date>;
private xScale: Plottable.QuantitativeScale<number|Date>;
private yScale: Plottable.QuantitativeScale<number>;
private yScale: ITfScale;
private gridlines: Plottable.Components.Gridlines;
private center: Plottable.Components.Group;
private xAxis: Plottable.Axes.Numeric|Plottable.Axes.Time;
Expand Down Expand Up @@ -163,6 +168,9 @@ export class LineChart {
this.xAxis.formatter(xAxisFormatter);
}
this.yScale = LineChart.getYScaleFromType(yScaleType);
this.yScale.setValueProviderForDomain(
() => this.getValuesForYAxisDomainCompute());

this.yAxis = new Plottable.Axes.Numeric(this.yScale, 'left');
let yFormatter = vz_chart_helpers.multiscaleFormatter(
vz_chart_helpers.Y_AXIS_FORMATTER_PRECISION);
Expand All @@ -186,8 +194,11 @@ export class LineChart {
this.gridlines =
new Plottable.Components.Gridlines(this.xScale, this.yScale);

let xZeroLine = new Plottable.Components.GuideLineLayer('horizontal');
xZeroLine.scale(this.yScale).value(0);
let xZeroLine = null;
if (yScaleType !== YScaleType.LOG) {
xZeroLine = new Plottable.Components.GuideLineLayer('horizontal');
xZeroLine.scale(this.yScale).value(0);
}
let yZeroLine = new Plottable.Components.GuideLineLayer('vertical');
yZeroLine.scale(this.xScale).value(0);

Expand Down Expand Up @@ -299,10 +310,20 @@ export class LineChart {
if (ignoreYOutliers !== this._ignoreYOutliers) {
this._ignoreYOutliers = ignoreYOutliers;
this.updateSpecialDatasets();
this.yScale.ignoreOutlier(ignoreYOutliers);
this.resetYDomain();
}
}

private getValuesForYAxisDomainCompute(): number[] {
const accessors = this.getAccessorsForComputingYRange();
let datasetToValues: (d: Plottable.Dataset) => number[][] = (d) => {
return accessors.map(accessor => d.data().map(x => accessor(x, -1, d)));
};
return _.flattenDeep<number>(this.datasets.map(datasetToValues))
.filter(isFinite);
}

/** Constructs special datasets. Each special dataset contains exceptional
* values from all of the regular datasets, e.g. last points in series, or
* NaN values. Those points will have a `name` and `relative` property added
Expand Down Expand Up @@ -388,21 +409,19 @@ export class LineChart {
}

private resetYDomain() {
let yDomain;
if (this._defaultYRange != null) {
// Use the range specified by the caller.
yDomain = this._defaultYRange;
this.yScale.domain(this._defaultYRange);
} else {
// Generate a reasonable range.
const accessors = this.getAccessorsForComputingYRange();
let datasetToValues: (d: Plottable.Dataset) => number[][] = (d) => {
return accessors.map(accessor => d.data().map(x => accessor(x, -1, d)));
};
const vals = _.flattenDeep<number>(this.datasets.map(datasetToValues))
.filter(isFinite);
yDomain = vz_chart_helpers.computeDomain(vals, this._ignoreYOutliers);
// TfScale has all the logics for scaling and we manually trigger it with
// `autoDomain`. However, this enables the autoDomain mode which updates
// the domain on any dataset change and this is not desirably especially
// when a run is not finished yet; we don't want the graph to change in
// scale while user is inspecting the graph. By setting the `domain`
// explicitly, we can turn the feature off.
this.yScale.autoDomain();
this.yScale.domain(this.yScale.domain());
}
this.yScale.domain(yDomain);
}

private getAccessorsForComputingYRange(): Plottable.IAccessor<number>[] {
Expand Down Expand Up @@ -721,12 +740,11 @@ export class LineChart {
return this.name2datasets[name];
}

static getYScaleFromType(yScaleType: string):
Plottable.QuantitativeScale<number> {
if (yScaleType === 'log') {
return new Plottable.Scales.ModifiedLog();
} else if (yScaleType === 'linear') {
return new Plottable.Scales.Linear();
static getYScaleFromType(yScaleType: string): ITfScale {
if (yScaleType === YScaleType.LOG) {
return new LogScale();
} else if (yScaleType === YScaleType.LINEAR) {
return new LinearScale();
} else {
throw new Error('Unrecognized yScale type ' + yScaleType);
}
Expand Down
122 changes: 122 additions & 0 deletions tensorboard/components/vz_line_chart2/linear-scale.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/* Copyright 2018 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
namespace vz_line_chart2 {

export class LinearScale extends Plottable.Scales.Linear implements ITfScale {
private _ignoreOutlier: boolean = false;
protected _valueProviderForDomain: ValueProviderForDomain;

constructor() {
super();
this.padProportion(.2);
}

public setValueProviderForDomain(provider: ValueProviderForDomain): this {
this._valueProviderForDomain = provider;
return this;
}

/**
* TODO(nickfelt): Examine whether we truly require `c`.
* Adds some padding to a given domain. Specifically, it:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW, it would seem more consistent if padProportion were always used to determine the padding factor, rather than effectively using 0.1 instead for the edge cases outlined below.

That way the logic is more streamlined - you can mostly just adjust the domain, and only apply padding in one consistent way at the end. And it's easier to catch extra edge cases in domain adjustment that the current logic isn't handling, like a === b === 0 and also the expansion in the case where a/2 < b < 0.

let [a, b] = domain;
if (a === b) {
  if (a > 0) {
    [a, b] = [0, 2a];
  } else if (a < 0) {
    [a, b] = [2a, 0];
  } else {
    [a, b] = [-1, 1];
  }
} else if (0 < a && a < b/2) {
  a = 0;
} else if (a/2 < b && b < 0) {
  b = 0;
}
padding = (b - a) * this.padProportion();
return super._niceDomain([a - padding, b + padding], count);

* - returns about [-0.1a - c, 2.1a + c] when a = b and a >= 0.
* - returns about [-2.1|a| - c, -0.1|a| + c] when a = b and a < 0.
* - returns [-0.1b, b + padProportion * (b-a)] if b > 2a and a > 0
* - else, pads by `padProportion`
* Note that `c` is a constant offset which specifically is 1.1. Please refer
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a TODO(nickfelt) here to revisit whether this offset is actually intentional/helpful?

* to [1] for its rationale.
* @override
*/
protected _niceDomain(domain: number[], count?: number): number[] {
const [a, b] = domain;
let padding: number;
const span = b - a;
if (span === 0) {
// If b===a, we would create an empty range. We instead select the range
// [0, 2*a] if a > 0, or [-2*a, 0] if a < 0, plus a little bit of
// extra padding on the top and bottom of the plot.
padding = Math.abs(a) * 1.1 + 1.1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should that extra + 1.1 be there? This doesn't seem quite right because the final lower bound will be a - |a| * 1.1 - 1.1 which for a > 0 is -0.1 |a| - 1.1 and for a < 0 is -2.1 |a| - 1.1. There's always a -1.1 fixed offset that isn't subject to any scaling, which doesn't match the description above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not answering your question directly, I took the code directly from
https://github.com/tensorflow/tensorboard/blob/master/tensorboard/components/vz_chart_helpers/vz-chart-helpers.ts#L154-L178

Instead of focusing on correctness, I made sure the linear scale remains exactly as is today. I honestly do not exactly understand the original author's intension here.

} else {
padding = span * this.padProportion();
}

let lower: number;
if (a >= 0 && a < span) {
// [1]: We include the intercept (y = 0) if doing so less than doubles the
// span of the y-axis. (We actually select a lower bound that's slightly
// less than 0 so that 0.00 will clearly be written on the lower edge of
// the chart. The label on the lowest tick is often filtered out.)
lower = -0.1 * b;
} else {
lower = a - padding;
}
return super._niceDomain([lower, b + padding], count);
}

/**
* @override to remove default padding logic.
*/
protected _getUnboundedExtent(ignoreAttachState): number[] {
const includedValues = this._getAllIncludedValues(ignoreAttachState);
let extent = this._defaultExtent();
if (includedValues.length !== 0) {
const combinedExtent = [
Plottable.Utils.Math.min<number>(includedValues, extent[0]),
Plottable.Utils.Math.max<number>(includedValues, extent[1]),
];
extent = this._niceDomain(combinedExtent);
}
return extent;
}

/**
* @override
*/
protected _getAllIncludedValues(ignoreAttachState = false): number[] {
const values = this._valueProviderForDomain ?
this._valueProviderForDomain() : [];
return this.extentOfValues(values);
}

/**
* @override to apply the outlier logic.
*/
public extentOfValues(values: number[]): number[] {
const legalValues = values
.filter(x => Plottable.Utils.Math.isValidNumber(x));
let filteredValues = legalValues;
if (this.ignoreOutlier()) {
const sortedValues = legalValues.sort((a, b) => a - b);
const a = d3.quantile(sortedValues, 0.05);
const b = d3.quantile(sortedValues, 0.95);
filteredValues = legalValues.filter(x => x >= a && x <= b);
}
const extent = d3.extent(filteredValues);
return extent[0] == null || extent[1] == null ? [] : extent;
}

public ignoreOutlier(): boolean;
public ignoreOutlier(ignore: boolean): this;
public ignoreOutlier(ignore?: boolean): any {
if (typeof ignore == 'boolean') {
this._ignoreOutlier = ignore;
return this;
}
return this._ignoreOutlier;
}

}

} // namespace vz_line_chart2
Loading