diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index 48b1f2e03c..a56ac3cf28 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -36,7 +36,9 @@
     "combokeys": "^3.0.0",
     "cytoscape": "^3.2.1",
     "cytoscape-dagre": "^2.0.0",
-    "d3-scale": "^1.0.6",
+    "d3-color": "^1.2.0",
+    "d3-interpolate": "^1.2.0",
+    "d3-scale": "^2.1.0",
     "dagre": "^0.7.4",
     "deep-freeze": "^0.0.1",
     "fuzzy": "^0.1.3",
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js
index 70daf02b7f..51650a6c07 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js
@@ -27,6 +27,7 @@ import type { FetchedTrace } from '../../../types';
 import './DiffSelection.css';
 
 type Props = {
+  metric: ?string,
   toggleComparison: (string, boolean) => void,
   traces: FetchedTrace[],
 };
@@ -37,9 +38,9 @@ export default class DiffSelection extends React.PureComponent<Props> {
   props: Props;
 
   render() {
-    const { toggleComparison, traces } = this.props;
+    const { metric, toggleComparison, traces } = this.props;
     const cohort = traces.filter(ft => ft.state !== fetchedState.ERROR).map(ft => ft.id);
-    const compareHref = cohort.length > 1 ? getUrl({ cohort }) : null;
+    const compareHref = cohort.length > 1 ? getUrl({ cohort, metric }) : null;
     const compareBtn = (
       <Button className="ub-right" disabled={cohort.length < 2} type="primary">
         Compare Traces
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
index b7a9affcd8..58f7a7d31a 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
@@ -36,6 +36,7 @@ type SearchResultsProps = {
   cohortAddTrace: string => void,
   cohortRemoveTrace: string => void,
   diffCohort: FetchedTrace[],
+  diffMetric: ?string,
   goToTrace: string => void,
   loading: boolean,
   maxTraceDuration: number,
@@ -85,8 +86,10 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
   };
 
   render() {
-    const { loading, diffCohort, skipMessage, traces } = this.props;
-    const diffSelection = <DiffSelection toggleComparison={this.toggleComparison} traces={diffCohort} />;
+    const { loading, diffCohort, diffMetric, skipMessage, traces } = this.props;
+    const diffSelection = (
+      <DiffSelection toggleComparison={this.toggleComparison} traces={diffCohort} metric={diffMetric} />
+    );
     if (loading) {
       return (
         <React.Fragment>
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/index.js b/packages/jaeger-ui/src/components/SearchTracePage/index.js
index 65cd1b59d8..1f66e22f22 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/index.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/index.js
@@ -68,6 +68,7 @@ export class SearchTracePageImpl extends Component {
       cohortAddTrace,
       cohortRemoveTrace,
       diffCohort,
+      diffMetric,
       errors,
       isHomepage,
       loadingServices,
@@ -103,6 +104,7 @@ export class SearchTracePageImpl extends Component {
                 maxTraceDuration={maxTraceDuration}
                 cohortRemoveTrace={cohortRemoveTrace}
                 diffCohort={diffCohort}
+                diffMetric={diffMetric}
                 skipMessage={isHomepage}
                 traces={traceResults}
               />
@@ -127,6 +129,7 @@ SearchTracePageImpl.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   traceResults: PropTypes.array,
   diffCohort: PropTypes.array,
+  diffMetric: PropTypes.string,
   cohortAddTrace: PropTypes.func,
   cohortRemoveTrace: PropTypes.func,
   maxTraceDuration: PropTypes.number,
@@ -167,8 +170,11 @@ const stateTraceXformer = getLastXformCacher(stateTrace => {
 
 const stateTraceDiffXformer = getLastXformCacher((stateTrace, stateTraceDiff) => {
   const { traces } = stateTrace;
-  const { cohort } = stateTraceDiff;
-  return cohort.map(id => traces[id] || { id });
+  const { cohort, metric } = stateTraceDiff;
+  return {
+    metric,
+    cohort: cohort.map(id => traces[id] || { id }),
+  };
 });
 
 const sortedTracesXformer = getLastXformCacher((traces, sortBy) => {
@@ -198,7 +204,7 @@ export function mapStateToProps(state) {
   const query = queryString.parse(state.router.location.search);
   const isHomepage = !Object.keys(query).length;
   const { traces, maxDuration, traceError, loadingTraces } = stateTraceXformer(state.trace);
-  const diffCohort = stateTraceDiffXformer(state.trace, state.traceDiff);
+  const { cohort: diffCohort, metric: diffMetric } = stateTraceDiffXformer(state.trace, state.traceDiff);
   const { loadingServices, services, serviceError } = stateServicesXformer(state.services);
   const errors = [];
   if (traceError) {
@@ -211,6 +217,7 @@ export function mapStateToProps(state) {
   const traceResults = sortedTracesXformer(traces, sortBy);
   return {
     diffCohort,
+    diffMetric,
     isHomepage,
     loadingServices,
     loadingTraces,
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js
index 15fa072b2d..b31b3b4b4c 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.js
@@ -25,6 +25,7 @@ import { actions as diffActions } from './duck';
 import { getUrl } from './url';
 import TraceDiffGraph from './TraceDiffGraph';
 import TraceDiffHeader from './TraceDiffHeader';
+import TraceDiffSettings from './TraceDiffSettings';
 import * as jaegerApiActions from '../../actions/jaeger-api';
 import { TOP_NAV_HEIGHT } from '../../constants';
 
@@ -40,6 +41,10 @@ type Props = {
   fetchMultipleTraces: (string[]) => void,
   forceState: TraceDiffState => void,
   history: RouterHistory,
+  metric: ?string,
+  scale: ?string,
+  scaleOn: ?string,
+  showSettings: boolean,
   tracesData: Map<string, ?FetchedTrace>,
   traceDiffState: TraceDiffState,
 };
@@ -49,8 +54,8 @@ type State = {
 };
 
 function syncStates(urlSt, reduxSt, forceState) {
-  const { a: urlA, b: urlB } = urlSt;
-  const { a: reduxA, b: reduxB } = reduxSt;
+  const { a: urlA, b: urlB, metric: metricA, scale: scaleA, scaleOn: scaleOnA } = urlSt;
+  const { a: reduxA, b: reduxB, metric: metricB, scale: scaleB, scaleOn: scaleOnB } = reduxSt;
   if (urlA !== reduxA || urlB !== reduxB) {
     forceState(urlSt);
     return;
@@ -64,6 +69,17 @@ function syncStates(urlSt, reduxSt, forceState) {
   const needSync = Array.from(urlCohort).some(id => !reduxCohort.has(id));
   if (needSync) {
     forceState(urlSt);
+    return;
+  }
+  if (metricA !== metricB) {
+    forceState(urlSt);
+    return;
+  }
+  if (scaleA !== scaleB) {
+    forceState(urlSt);
+  }
+  if (scaleOnA !== scaleOnB) {
+    forceState(urlSt);
   }
 }
 
@@ -105,8 +121,19 @@ export class TraceDiffImpl extends React.PureComponent<Props, State> {
   }
 
   processProps() {
-    const { a, b, cohort, fetchMultipleTraces, forceState, tracesData, traceDiffState } = this.props;
-    syncStates({ a, b, cohort }, traceDiffState, forceState);
+    const {
+      a,
+      b,
+      cohort,
+      metric,
+      fetchMultipleTraces,
+      forceState,
+      scale,
+      scaleOn,
+      tracesData,
+      traceDiffState,
+    } = this.props;
+    syncStates({ a, b, cohort, metric, scale, scaleOn }, traceDiffState, forceState);
     const cohortData = cohort.map(id => tracesData.get(id) || { id, state: null });
     const needForDiffs = cohortData.filter(ft => ft.state == null).map(ft => ft.id);
     if (needForDiffs.length) {
@@ -116,8 +143,8 @@ export class TraceDiffImpl extends React.PureComponent<Props, State> {
 
   diffSetUrl(change: { newA?: ?string, newB?: ?string }) {
     const { newA, newB } = change;
-    const { a, b, cohort, history } = this.props;
-    const url = getUrl({ a: newA || a, b: newB || b, cohort });
+    const { a, b, cohort, metric, history, scale, scaleOn } = this.props;
+    const url = getUrl({ a: newA || a, b: newB || b, cohort, metric, scale, scaleOn });
     history.push(url);
   }
 
@@ -132,7 +159,7 @@ export class TraceDiffImpl extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { a, b, cohort, tracesData } = this.props;
+    const { a, b, cohort, history, metric, scale, scaleOn, showSettings, tracesData } = this.props;
     const { graphTopOffset } = this.state;
     const traceA = a ? tracesData.get(a) || { id: a } : null;
     const traceB = b ? tracesData.get(b) || { id: b } : null;
@@ -150,8 +177,19 @@ export class TraceDiffImpl extends React.PureComponent<Props, State> {
           />
         </div>
         <div key="graph" className="TraceDiff--graphWrapper" style={{ top: graphTopOffset }}>
-          <TraceDiffGraph a={traceA} b={traceB} />
+          <TraceDiffGraph a={traceA} b={traceB} metric={metric} scale={scale} scaleOn={scaleOn} />
         </div>
+        {showSettings && (
+          <TraceDiffSettings
+            a={a}
+            b={b}
+            cohort={cohort}
+            metric={metric}
+            scale={scale}
+            scaleOn={scaleOn}
+            pushUrl={history.push}
+          />
+        )}
       </React.Fragment>
     );
   }
@@ -160,7 +198,9 @@ export class TraceDiffImpl extends React.PureComponent<Props, State> {
 // TODO(joe): simplify but do not invalidate the URL
 export function mapStateToProps(state: ReduxState, ownProps: { match: Match }) {
   const { a, b } = ownProps.match.params;
-  const { cohort: origCohort = [] } = queryString.parse(state.router.location.search);
+  const { duration, cohort: origCohort = [], metric, scale, scaleOn } = queryString.parse(
+    state.router.location.search
+  );
   const fullCohortSet: Set<string> = new Set([].concat(a, b, origCohort).filter(Boolean));
   const cohort: string[] = Array.from(fullCohortSet);
   const { traces } = state.trace;
@@ -170,7 +210,11 @@ export function mapStateToProps(state: ReduxState, ownProps: { match: Match }) {
     a,
     b,
     cohort,
+    metric,
+    scale,
+    scaleOn,
     tracesData,
+    showSettings: duration !== undefined || metric !== undefined,
     traceDiffState: state.traceDiff,
   };
 }
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js
index 2f182644f1..f5aabd2f6d 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js
@@ -17,13 +17,18 @@
 import * as React from 'react';
 import { DirectedGraph, LayoutManager } from '@jaegertracing/plexus';
 
-import drawNode from './drawNode';
+// import drawNode from './drawNode';
+import { getNodeDrawer } from './drawNode';
+import getColorInterpolator from './getColorInterpolator';
 import ErrorMessage from '../../common/ErrorMessage';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import { fetchedState } from '../../../constants';
 import convPlexus from '../../../model/trace-dag/convPlexus';
 import TraceDag from '../../../model/trace-dag/TraceDag';
 
+// import type { DiffMembers } from '../../../model/trace-dag/DagNode';
+// import type { PVertex } from '../../../model/trace-dag/types';
+// import type { TraceDiffState } from '../../../types/trace-diff';
 import type { FetchedTrace } from '../../../types';
 
 import './TraceDiffGraph.css';
@@ -31,6 +36,9 @@ import './TraceDiffGraph.css';
 type Props = {
   a: ?FetchedTrace,
   b: ?FetchedTrace,
+  metric: ?string,
+  scale: ?string,
+  scaleOn: ?string,
 };
 
 const { classNameIsSmall } = DirectedGraph.propsFactories;
@@ -49,18 +57,24 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
   props: Props;
 
   layoutManager: LayoutManager;
+  // nodeFactory: (vertex: PVertex<DiffMembers>) => React.Node;
 
   constructor(props: Props) {
     super(props);
     this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
   }
 
+  // componentWillMount() {
+  //   const { metric } = this.props;
+  //   // this.nodeFactory = getNodeDrawer(metric);
+  // }
+
   componentWillUnmount() {
     this.layoutManager.stopAndRelease();
   }
 
   render() {
-    const { a, b } = this.props;
+    const { a, b, metric, scale, scaleOn } = this.props;
     if (!a || !b) {
       return <h1 className="u-mt-vast u-tx-muted ub-tx-center">At least two Traces are needed</h1>;
     }
@@ -95,8 +109,9 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
     const aTraceDag = TraceDag.newFromTrace(aData);
     const bTraceDag = TraceDag.newFromTrace(bData);
     const diffDag = TraceDag.diff(aTraceDag, bTraceDag);
+    const getColor = getColorInterpolator(metric, scale, scaleOn, diffDag.nodesMap);
     const { edges, vertices } = convPlexus(diffDag.nodesMap);
-
+    const nodeFactory = getNodeDrawer(metric, scaleOn, getColor);
     return (
       <div className="TraceDiffGraph--graphWrapper">
         <DirectedGraph
@@ -106,7 +121,7 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
           className="TraceDiffGraph--dag"
           minimapClassName="TraceDiffGraph--miniMap"
           layoutManager={this.layoutManager}
-          getNodeLabel={drawNode}
+          getNodeLabel={nodeFactory}
           setOnRoot={classNameIsSmall}
           setOnEdgesContainer={setOnEdgesContainer}
           edges={edges}
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/avg-duration.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/avg-duration.js
new file mode 100644
index 0000000000..941edb8c8c
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/avg-duration.js
@@ -0,0 +1,81 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// 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.
+
+import DagNode from '../../../model/trace-dag/DagNode';
+
+import type { DiffMembers } from '../../../model/trace-dag/DagNode';
+import type { DenseSpan, NodeID } from '../../../model/trace-dag/types';
+
+type AvgDurations = {
+  a: ?number,
+  b: ?number,
+};
+
+const avgDurationsCache: WeakMap<DiffMembers, AvgDurations> = new WeakMap();
+
+// export function getAvgDuration(denseSpans: ?DenseSpan[]) {
+function getAvgDuration(denseSpans: ?(DenseSpan[])) {
+  if (!denseSpans) {
+    return null;
+  }
+  let sum = 0;
+  for (let i = 0; i < denseSpans.length; i++) {
+    sum += denseSpans[i].span.duration;
+  }
+  return sum / denseSpans.length;
+}
+
+export function getAvgDurations(diff: DiffMembers) {
+  const cached = avgDurationsCache.get(diff);
+  if (cached) {
+    return cached;
+  }
+  const a = getAvgDuration(diff.a && diff.a.members);
+  const b = getAvgDuration(diff.b && diff.b.members);
+  const rv = { a, b };
+  avgDurationsCache.set(diff, rv);
+  return rv;
+}
+
+export function getRelativeDifference(a: number, b: number) {
+  return (a - b) / Math.max(a, b) * 100;
+}
+
+function getDifference(a: number, b: number) {
+  return a - b;
+}
+
+export function getAvgDurationDiffDomain(scaleOn: ?string, nodesMap: Map<NodeID, DagNode>) {
+  let maxRelDiff = 0;
+  const getDiff = scaleOn === 'relative' ? getRelativeDifference : getDifference;
+  const keys = [...nodesMap.keys()];
+  for (let i = 0; i < keys.length; i++) {
+    const id = keys[i];
+    const dagNode = nodesMap.get(id);
+    if (!dagNode) {
+      continue;
+    }
+    const { a, b } = getAvgDurations(dagNode.data);
+    if (a == null || b == null) {
+      continue;
+    }
+    const relDiff = Math.abs(getDiff(a, b));
+    if (relDiff > maxRelDiff) {
+      maxRelDiff = relDiff;
+    }
+  }
+  return [-maxRelDiff, 0, maxRelDiff];
+}
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
index f09ba89814..87fac48f1c 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css
@@ -26,6 +26,8 @@ limitations under the License.
   opacity: 0;
 }
 
+/* Default styling of nodes is for structural diff */
+
 .DiffNode.is-changed {
   color: rgba(0, 0, 0, 0.85);
 }
@@ -52,6 +54,67 @@ limitations under the License.
   color: #fff;
 }
 
+/* Color of text when interpolating node background colors */
+
+.DiffNode.is-dark-text {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.DiffNode.is-light-text {
+  color: #fff;
+}
+
+/* DiffNode styling for comparing durations */
+
+/* added
+    stroke: #1d39c4;
+    fill: #8E9FDE;
+
+removed
+    fill: #ff85c0;
+    stroke-width: 3;
+    stroke: #ff0095; */
+
+.DiffNode.is-duration-diff.is-more {
+  /* background: #78d539; */
+  background: unset;
+  /* border-color: #2a8f04; */
+  border: 1px solid #777;
+}
+
+.DiffNode.is-duration-diff.is-added {
+  /* background: #2a8f04; */
+  background: #8e9fde;
+  border-color: #1d39c4;
+  /* color: #fff; */
+  background: none;
+  /* color: transparent; */
+  color: rgba(0, 0, 0, 0.65);
+  background: #fff;
+  border: 1px solid #ccc;
+}
+
+.DiffNode.is-duration-diff.is-less {
+  background: unset;
+  /* border-color: #cc1616; */
+  /* border: none; */
+  border: 1px solid #777;
+}
+
+.DiffNode.is-duration-diff.is-removed {
+  /* background: #cc1616; */
+  background: #eb2f96;
+  border: none;
+  /* color: #fff; */
+  background: none;
+  /* color: transparent; */
+  color: rgba(0, 0, 0, 0.65);
+  background: #fff;
+  border: 1px solid #ccc;
+}
+
+/* Metric cell */
+
 .DiffNode--metricCell {
   padding: 0.3rem 0.5rem;
   background: rgba(255, 255, 255, 0.3);
@@ -66,6 +129,32 @@ limitations under the License.
   background: rgba(0, 0, 0, 0.2);
 }
 
+.DiffNode--metricCell.is-duration-diff.is-added,
+.DiffNode--metricCell.is-duration-diff.is-removed {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid #bbb;
+  border-top: none;
+  border-bottom: none;
+}
+
+.TraceDiffGraph--dag.is-small .DiffNode--metricCell.is-duration-diff.is-added,
+.TraceDiffGraph--dag.is-small .DiffNode--metricCell.is-duration-diff.is-removed {
+  border: none;
+  border-bottom: none;
+}
+
+.DiffNode--metricCell.is-duration-diff.is-secondary {
+  background: none;
+}
+
+.DiffNode--metricCell.is-duration-diff.is-added.is-secondary {
+  background: #1d39c410;
+}
+
+.DiffNode--metricCell.is-duration-diff.is-removed.is-secondary {
+  background: #ef07e710;
+}
+
 .DiffNode--metricSymbol {
   margin: 0 0.1em;
 }
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js
index cbe2d3b9f6..de84c9e98d 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.js
@@ -18,55 +18,106 @@ import * as React from 'react';
 import { Popover } from 'antd';
 import cx from 'classnames';
 
+// import DagNode from '../../../model/trace-dag/DagNode';
+import { getAvgDurations, getRelativeDifference } from './avg-duration';
+import { DARK, LIGHT } from './getColorInterpolator';
+import {
+  DurationDiffAbsolute,
+  DurationDiffPercent,
+  SpanCountDiffAbsolute,
+  SpanCountDiffPercent,
+} from './metric-renderers';
+import DagNode from '../../../model/trace-dag/DagNode';
+// import { formatDuration } from '../../../utils/date';
+
+// import type { DiffMembers } from '../../../model/trace-dag/DagNode';
 import type { PVertex } from '../../../model/trace-dag/types';
 
 import './drawNode.css';
 
 type Props = {
-  a: number,
-  b: number,
+  diff: { a: ?DagNode, b: ?DagNode },
+  getColor: ?(number) => { color: string, textColor: string },
+  metric: ?string,
   operation: string,
+  scaleOn: ?string,
   service: string,
 };
 
-const abs = Math.abs;
-const max = Math.max;
+// const abs = Math.abs;
+// const max = Math.max;
+
+// function getAvgDuration(denseSpans: ?DenseSpan[]) {
+//   if (!denseSpans) {
+//     return null;
+//   }
+//   let sum = 0;
+//   for (let i = 0; i < denseSpans.length; i++) {
+//     sum += denseSpans[i].span.duration;
+//   }
+//   return sum / denseSpans.length;
+// }
 
 class DiffNode extends React.PureComponent<Props> {
   props: Props;
 
   render() {
-    const { a, b, operation, service } = this.props;
+    const { diff, getColor, metric, operation, scaleOn, service } = this.props;
+    let a;
+    let b;
+    if (metric === 'duration') {
+      const durations = getAvgDurations(diff);
+      a = durations.a;
+      b = durations.b;
+    } else {
+      a = diff.a && diff.a.members.length;
+      b = diff.b && diff.b.members.length;
+    }
+    // const { a, b } = getAvgDurations(diff);
+    // const a = metric === 'duration' ? getAvgDuration(diff.a && diff.a.members) : diff.a && diff.a.members.length;
+    // const b = metric === 'duration' ? getAvgDuration(diff.b && diff.b.members) : diff.b && diff.b.members.length;
+    // const b = diff.b && getAvgDuration(diff.b.members);
     const isSame = a === b;
+    let textColor = '';
+    const style: Object = {};
+    if (getColor && a !== b && a != null && b != null) {
+      const change = scaleOn === 'relative' ? getRelativeDifference(a, b) : a - b;
+      const c = getColor(change);
+      style.backgroundColor = c.color;
+      textColor = c.textColor;
+    }
     const className = cx({
+      'is-duration-diff': metric === 'duration',
       'is-same': isSame,
       'is-changed': !isSame,
-      'is-more': b > a && a > 0,
-      'is-added': a === 0,
-      'is-less': a > b && b > 0,
-      'is-removed': b === 0,
+      'is-more': a && b && b > a,
+      'is-added': a == null,
+      'is-less': a && b && a > b,
+      'is-removed': b == null,
+      'is-light-text': textColor === LIGHT,
+      'is-dark-text': textColor === DARK,
     });
-    const chgSign = a < b ? '+' : '-';
+    const countClassName = cx(className, { 'is-secondary': metric == null || metric !== 'count' });
     const table = (
-      <table className={`DiffNode ${className}`}>
+      <table className={`DiffNode ${className}`} style={style}>
         <tbody>
           <tr>
-            <td className={`DiffNode--metricCell ${className}`} rowSpan={isSame ? 2 : 1}>
-              {isSame ? null : <span className="DiffNode--metricSymbol">{chgSign}</span>}
-              {isSame ? a : abs(b - a)}
-            </td>
+            <SpanCountDiffAbsolute className={countClassName} diff={diff} />
+            {metric === 'duration' && <DurationDiffAbsolute className={className} diff={diff} />}
             <td className={`DiffNode--labelCell ${className}`}>
               <strong>{service}</strong>
             </td>
           </tr>
           <tr>
-            {isSame ? null : (
+            <SpanCountDiffPercent className={countClassName} diff={diff} />
+            {metric === 'duration' && <DurationDiffPercent className={className} diff={diff} />}
+            {/* {isSame ? null : (
               <td className={`DiffNode--metricCell ${className}`}>
                 <span className="DiffNode--metricSymbol">{chgSign}</span>
                 {a === 0 || b === 0 ? 100 : abs((a - b) / max(a, b) * 100).toFixed(0)}
                 <span className="DiffNode--metricSymbol">%</span>
               </td>
-            )}
+            )} */}
             <td className={`DiffNode--labelCell ${className}`}>{operation}</td>
           </tr>
         </tbody>
@@ -74,14 +125,40 @@ class DiffNode extends React.PureComponent<Props> {
     );
 
     return (
-      <Popover overlayClassName={`DiffNode--popover ${className}`} mouseEnterDelay={0.25} content={table}>
+      <Popover
+        overlayClassName={`DiffNode--popover ${className}`}
+        mouseEnterDelay={0.25}
+        content={table}
+        placement="topLeft"
+        arrowPointAtCenter
+      >
         {table}
       </Popover>
     );
   }
 }
 
-export default function drawNode<T>(vertex: PVertex<T>) {
-  const { data, operation, service } = vertex.data;
-  return <DiffNode {...data} operation={operation} service={service} />;
+// export default function drawNode<T>(vertex: PVertex<T>) {
+//   const { data, operation, service } = vertex.data;
+//   return <DiffNode diff={data} operation={operation} service={service} />;
+// }
+
+export function getNodeDrawer(
+  metric: ?string,
+  scaleOn: ?string,
+  getColor: ?(number) => { color: string, textColor: string }
+) {
+  return function drawNodeOnMetric(vertex: PVertex) {
+    const { data, operation, service } = vertex.data;
+    return (
+      <DiffNode
+        diff={data}
+        operation={operation}
+        service={service}
+        metric={metric}
+        getColor={getColor}
+        scaleOn={scaleOn}
+      />
+    );
+  };
 }
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/getColorInterpolator.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/getColorInterpolator.js
new file mode 100644
index 0000000000..7a814615bb
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/getColorInterpolator.js
@@ -0,0 +1,157 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// 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.
+
+import { rgb } from 'd3-color';
+import { interpolateLab } from 'd3-interpolate';
+import { scaleLinear, scaleSqrt } from 'd3-scale';
+
+import { getAvgDurationDiffDomain } from './avg-duration';
+
+import DagNode from '../../../model/trace-dag/DagNode';
+
+// import type { DiffMembers } from '../../../model/trace-dag/DagNode';
+import type { NodeID } from '../../../model/trace-dag/types';
+
+export const DARK = 'DARK';
+export const LIGHT = 'LIGHT';
+
+const spectrums = {
+  // duration: ['#3b7020', '#ccc', '#c00'],
+  // duration: ['#135200', '#d9d9d9', '#a8071a'],
+  // duration: ['#a8071a', '#aaa', '#135200'],
+  duration: {
+    less: ['#ddd', '#a8071a'],
+    more: ['#ddd', '#135200'],
+  },
+};
+
+const textColorCache: Map<string, string> = new Map();
+
+const LUMINANCE_THRESHOLD = Math.sqrt(1.05 * 0.05) - 0.05;
+
+// the method for determining if ligth or dark text should be used
+// https://stackoverflow.com/a/3943023/1888292
+function adjComponent(value: number) {
+  const n = value / 255;
+  if (n <= 0.03928) {
+    return n / 12.92;
+  }
+  return ((n + 0.055) / 1.055) ** 2.4;
+}
+
+function getTextColor(colorString) {
+  const cached = textColorCache.get(colorString);
+  if (cached != null) {
+    return cached;
+  }
+  const { r, g, b } = rgb(colorString);
+  const luminance = adjComponent(r) * 0.2126 + adjComponent(g) * 0.7152 + adjComponent(b) * 0.0722;
+  // const values = [r, g, b];
+  const v = luminance > LUMINANCE_THRESHOLD ? DARK : LIGHT;
+  console.log(colorString, 'l', luminance, v);
+  textColorCache.set(colorString, v);
+  return v;
+}
+// function getTextColor(colorString) {
+//   const cached = textColorCache.get(colorString);
+//   if (cached != null) {
+//     return cached;
+//   }
+//   const { l } = hsl(colorString);
+//   const v = l > LUMINANCE_THRESHOLD ? DARK : LIGHT;
+//   console.log(colorString, 'l', l, v)
+//   textColorCache.set(colorString, v);
+//   return v;
+// }
+
+export default function getColorInterpolator(
+  metric: ?string,
+  scale: ?string,
+  scaleOn: ?string,
+  nodesMap: Map<NodeID, DagNode>
+) {
+  if (metric !== 'duration') {
+    return null;
+  }
+  const diffDomain = getAvgDurationDiffDomain(scaleOn, nodesMap);
+  const [, , max] = diffDomain;
+
+  // const scaleFn = scale !== 'log' ? scaleLinear : () => scaleLog().base(40);
+  // const scaleFn = scale !== 'log' ? scaleLinear : () => scalePow().exponent(0.5);
+  // const scaleFn = scale !== 'log' ? scaleLinear : () => scalePow().exponent(0.325);
+  // const scaleFn = scale !== 'log' ? scaleLinear : () => scalePow().exponent(0.38);
+  const scaleFn = scale === 'power' ? scaleSqrt : scaleLinear;
+  // const [min, center, max] = diffDomain;
+  // let shiftAmount = 1;
+  // if (Math.sign(min) !== Math.sign(max)) {
+  //   shiftAmount = Math.abs(min - 1);
+  // }
+  // const lessInterpolator = scaleLog()
+  const lessInterpolator = scaleFn()
+    // .domain([1, max + 1])
+    .domain([0, max])
+    .range(spectrums.duration.less)
+    .interpolate(interpolateLab);
+
+  // const moreInterpolator = scaleLog()
+  const moreInterpolator = scaleFn()
+    // .domain([1, max + 1])
+    .domain([0, max])
+    .range(spectrums.duration.more)
+    .interpolate(interpolateLab);
+  // const colorInterpolator = scaleLog()
+  //   .domain([
+  //     min + shiftAmount,
+  //     center + shiftAmount,
+  //     max + shiftAmount,
+  //   ])
+  //   .range(spectrums.duration)
+  //   .interpolate(interpolateLab);
+  return function getColor(value: number) {
+    // console.log(colorInterpolator(value + shiftAmount))
+    const v = Math.abs(value);
+    const color = value < 0 ? lessInterpolator(v) : moreInterpolator(v);
+    const textColor = getTextColor(color);
+    return { color, textColor };
+    // return colorInterpolator(value + shiftAmount);
+  };
+}
+
+// export default function getColorInterpolator(metric: ?string, scaleOn: ?string, nodesMap: Map<NodeID, DagNode<DiffMembers>>) {
+//   if (metric !== 'duration') {
+//     return null;
+//   }
+//   const diffDomain = getAvgDurationDiffDomain(scaleOn, nodesMap);
+//   const [min, center, max] = diffDomain;
+//   let shiftAmount = 1;
+//   if (Math.sign(min) !== Math.sign(max)) {
+//     shiftAmount = Math.abs(min - 1);
+//   }
+//   console.log('shift amt:', diffDomain, shiftAmount)
+//   // const colorInterpolator = scaleLinear()
+//   const colorInterpolator = scaleLog()
+//     .domain([
+//       min + shiftAmount,
+//       center + shiftAmount,
+//       max + shiftAmount,
+//     ])
+//     .range(spectrums.duration)
+//     .interpolate(interpolateLab);
+//   return function getColor(value: number) {
+//     // console.log(colorInterpolator(value + shiftAmount))
+//     return colorInterpolator(value + shiftAmount);
+//   }
+// }
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/metric-renderers.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/metric-renderers.js
new file mode 100644
index 0000000000..44d8b59148
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/metric-renderers.js
@@ -0,0 +1,105 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// 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.
+
+import * as React from 'react';
+
+import { getAvgDurations, getRelativeDifference } from './avg-duration';
+import { formatDuration } from '../../../utils/date';
+
+import type { DiffMembers } from '../../../model/trace-dag/DagNode';
+
+type Props = {
+  className: string,
+  diff: DiffMembers,
+};
+
+const abs = Math.abs;
+// const max = Math.max;
+
+// function getAvgDuration(denseSpans: ?DenseSpan[]) {
+//   if (!denseSpans) {
+//     return null;
+//   }
+//   let sum = 0;
+//   for (let i = 0; i < denseSpans.length; i++) {
+//     sum += denseSpans[i].span.duration;
+//   }
+//   return sum / denseSpans.length;
+// }
+
+const getSign = (a: ?number, b: ?number) => (a == null || (b != null && a < b) ? '+' : '-');
+
+function renderDiffPercent(a, b, className) {
+  const value = a == null || b == null ? 100 : abs(getRelativeDifference(a, b));
+  return (
+    <td className={`DiffNode--metricCell ${className}`}>
+      <span className="DiffNode--metricSymbol">{getSign(a, b)}</span>
+      {value.toFixed(0)}
+      <span className="DiffNode--metricSymbol">%</span>
+    </td>
+  );
+}
+
+export function DurationDiffAbsolute(props: Props) {
+  const { className, diff } = props;
+  const { a, b } = getAvgDurations(diff);
+  const isSame = a === b;
+  let value = 0;
+  if (a == null || b == null) {
+    value = a == null ? b : a;
+  } else {
+    value = isSame ? a : abs(b - a);
+  }
+  return (
+    <td className={`DiffNode--metricCell ${className}`} rowSpan={isSame ? 2 : 1}>
+      {isSame ? null : <span className="DiffNode--metricSymbol">{getSign(a, b)}</span>}
+      {formatDuration(value)}
+    </td>
+  );
+}
+
+export function DurationDiffPercent(props: Props) {
+  const { className, diff } = props;
+  const { a, b } = getAvgDurations(diff);
+  if (a === b) {
+    return null;
+  }
+  return renderDiffPercent(a, b, className);
+}
+
+export function SpanCountDiffAbsolute(props: Props) {
+  const { className, diff } = props;
+  const a = (diff.a && diff.a.members.length) || 0;
+  const b = (diff.b && diff.b.members.length) || 0;
+  const isSame = a === b;
+  const absOnly = a === 0 || b === 0;
+  return (
+    <td className={`DiffNode--metricCell ${className}`} rowSpan={isSame || absOnly ? 2 : 1}>
+      {isSame ? null : <span className="DiffNode--metricSymbol">{getSign(a, b)}</span>}
+      {isSame ? a : abs(b - a)}
+    </td>
+  );
+}
+
+export function SpanCountDiffPercent(props: Props) {
+  const { className, diff } = props;
+  const a = (diff.a && diff.a.members.length) || 0;
+  const b = (diff.b && diff.b.members.length) || 0;
+  if (a === b || a === 0 || b === 0) {
+    return null;
+  }
+  return renderDiffPercent(a, b, className);
+}
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.css b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.css
new file mode 100644
index 0000000000..92ec5fbcdc
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.css
@@ -0,0 +1,50 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+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.
+*/
+
+.TraceDiffSettings {
+  bottom: 1rem;
+  cursor: pointer;
+  font-size: 1.6rem;
+  position: fixed;
+  right: 1rem;
+}
+
+.TraceDiffSettings:hover {
+  color: teal;
+}
+
+.TraceDiffSettings--items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.TraceDiffSettings--settingItem {
+  margin: 1.25rem 0;
+}
+
+.TraceDiffSettings--settingItem:first-child {
+  margin-top: 0;
+}
+
+.TraceDiffSettings--settingItem:last-child {
+  margin-bottom: 0;
+}
+
+.TraceDiffSettings--settingField {
+  float: right;
+  margin-left: 1rem;
+}
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.js
new file mode 100644
index 0000000000..015c6a4cb2
--- /dev/null
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffSettings.js
@@ -0,0 +1,134 @@
+// @flow
+
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// 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.
+
+import * as React from 'react';
+import { Popover, Switch } from 'antd';
+import IoGearAIcon from 'react-icons/lib/io/gear-a';
+
+import { getUrl } from './url';
+
+import './TraceDiffSettings.css';
+
+type Props = {
+  a: ?string,
+  b: ?string,
+  metric: ?string,
+  pushUrl: string => void,
+  scale: ?string,
+  scaleOn: ?string,
+};
+
+class SettingsPanel extends React.PureComponent<Props> {
+  props: Props;
+
+  toggleMetric = (value: boolean) => {
+    const metric = value ? 'duration' : 'spanCount';
+    this.pushUrl({ metric });
+    // const { a, b, cohort, scale, scaleOn, pushUrl } = this.props;
+    // const metric = value ? 'duration' : 'spanCount';
+    // const url = getUrl({ a, b, cohort, metric, scale, scaleOn })
+    // pushUrl(url);
+  };
+
+  toggleScale = (value: boolean) => {
+    const scale = value ? 'power' : 'linear';
+    this.pushUrl({ scale });
+  };
+
+  toggleScaleOn = (value: boolean) => {
+    const scaleOn = value ? 'relative' : 'real';
+    this.pushUrl({ scaleOn });
+  };
+
+  pushUrl = update => {
+    const { pushUrl, ...rest } = this.props;
+    const st = { ...rest, ...update };
+    const url = getUrl(st);
+    pushUrl(url);
+  };
+
+  render() {
+    const { metric, scale, scaleOn } = this.props;
+    return (
+      <ul className="TraceDiffSettings--items">
+        <li className="TraceDiffSettings--settingItem">
+          Duration
+          <Switch
+            className="TraceDiffSettings--settingField"
+            checked={metric === 'duration'}
+            onChange={this.toggleMetric}
+          />
+        </li>
+        <li className="TraceDiffSettings--settingItem">
+          Square-root scale
+          <Switch
+            className="TraceDiffSettings--settingField"
+            checked={scale === 'power'}
+            onChange={this.toggleScale}
+          />
+        </li>
+        <li className="TraceDiffSettings--settingItem">
+          Relative
+          <Switch
+            className="TraceDiffSettings--settingField"
+            checked={scaleOn === 'relative'}
+            onChange={this.toggleScaleOn}
+          />
+        </li>
+      </ul>
+    );
+  }
+}
+
+// // TODO(joe): simplify but do not invalidate the URL
+// export function mapStateToProps(state: ReduxState, ownProps: { match: Match }) {
+//   const { a, b } = ownProps.match.params;
+//   const { cohort: origCohort = [], metric, scale, scaleOn } = queryString.parse(state.router.location.search);
+//   const fullCohortSet: Set<string> = new Set([].concat(a, b, origCohort).filter(Boolean));
+//   const cohort: string[] = Array.from(fullCohortSet);
+//   return {
+//     state: {
+//       a,
+//       b,
+//       cohort,
+//       metric,
+//       scale,
+//       scaleOn,
+//     }
+//   };
+// }
+
+// // export for tests
+// export function mapDispatchToProps(dispatch: Function) {
+//   const { fetchMultipleTraces } = bindActionCreators(jaegerApiActions, dispatch);
+//   const { forceState } = bindActionCreators(diffActions, dispatch);
+//   return { fetchMultipleTraces, forceState };
+// }
+
+// const SettingsPanel = connect(mapStateToProps, () => { })(SettingsPanelImpl);
+
+export default function TraceDiffSettings(props: Props) {
+  return (
+    <Popover
+      placement="leftBottom"
+      content={<SettingsPanel {...props} />}
+      trigger="click"
+      overlayStyle={{ whiteSpace: 'nowrap' }}
+    >
+      <IoGearAIcon className="TraceDiffSettings" />
+    </Popover>
+  );
+}
diff --git a/packages/jaeger-ui/src/components/TraceDiff/duck.js b/packages/jaeger-ui/src/components/TraceDiff/duck.js
index 22cdbc7732..2e3835b584 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/duck.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/duck.js
@@ -18,17 +18,14 @@ import { createActions, handleActions } from 'redux-actions';
 
 import generateActionTypes from '../../utils/generate-action-types';
 
-// traceDiff {
-//   a: ?id,
-//   b: ?id
-//   cohort: id[],
-// }
-
 export function newInitialState() {
   return {
-    cohort: [],
     a: null,
     b: null,
+    cohort: [],
+    metric: null,
+    scale: null,
+    scaleOn: null,
   };
 }
 
diff --git a/packages/jaeger-ui/src/components/TraceDiff/url.js b/packages/jaeger-ui/src/components/TraceDiff/url.js
index 072d054801..c00db8fc10 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/url.js
+++ b/packages/jaeger-ui/src/components/TraceDiff/url.js
@@ -28,8 +28,19 @@ export function matches(path: string) {
   return Boolean(matchPath(path, ROUTE_MATCHER));
 }
 
-export function getUrl(state?: ?{ a?: ?string, b?: ?string, cohort: string[] }) {
-  const { a, b, cohort } = getValidState(state);
-  const search = queryString.stringify({ cohort });
+export function getUrl(state?: Object) {
+  const { metric, scale, scaleOn } = state || {};
+  const { a, b, cohort } = getValidState({ cohort: [], ...state });
+  const params: Object = { cohort };
+  if (metric) {
+    params.metric = metric;
+  }
+  if (scale) {
+    params.scale = scale;
+  }
+  if (scaleOn) {
+    params.scaleOn = scaleOn;
+  }
+  const search = queryString.stringify(params);
   return prefixUrl(`/trace/${a || ''}...${b || ''}${search ? '?' : ''}${search}`);
 }
diff --git a/packages/jaeger-ui/src/model/trace-dag/DagNode.js b/packages/jaeger-ui/src/model/trace-dag/DagNode.js
index 6a16689a70..214dad5676 100644
--- a/packages/jaeger-ui/src/model/trace-dag/DagNode.js
+++ b/packages/jaeger-ui/src/model/trace-dag/DagNode.js
@@ -14,9 +14,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type { NodeID } from './types';
+import type { DenseSpan, NodeID } from './types';
 
-export default class DagNode<T = void> {
+// export type DiffMembers = {
+//   a: ?DagNode<any>,
+//   b: ?DagNode<any>,
+// };
+
+export default class DagNode {
   static getID(service: string, operation: string, parentID?: ?string): NodeID {
     const name = `${service}\t${operation}`;
     return parentID ? `${parentID}\n${name}` : name;
@@ -26,17 +31,32 @@ export default class DagNode<T = void> {
   operation: string;
   parentID: ?NodeID;
   id: NodeID;
-  count: number;
+  // count: number;
+  members: DenseSpan[];
   children: Set<NodeID>;
-  data: T;
+  data: {
+    a: ?DagNode,
+    b: ?DagNode,
+  };
 
-  constructor(service: string, operation: string, parentID?: ?NodeID, data: T) {
+  constructor(service: string, operation: string, parentID?: ?NodeID) {
     this.service = service;
     this.operation = operation;
     this.parentID = parentID;
     this.id = DagNode.getID(service, operation, parentID);
-    this.count = 0;
+    // this.count = 0;
+    this.members = [];
     this.children = new Set();
-    this.data = data;
+    this.data = { a: null, b: null };
   }
 }
+
+export type DiffMembers = {
+  a: ?DagNode,
+  b: ?DagNode,
+};
+
+// export type DiffMembers = {
+//   a: ?DagNode<any>,
+//   b: ?DagNode<any>,
+// };
diff --git a/packages/jaeger-ui/src/model/trace-dag/TraceDag.js b/packages/jaeger-ui/src/model/trace-dag/TraceDag.js
index 4606e24bd2..7bee14dd9b 100644
--- a/packages/jaeger-ui/src/model/trace-dag/TraceDag.js
+++ b/packages/jaeger-ui/src/model/trace-dag/TraceDag.js
@@ -17,30 +17,28 @@
 import DagNode from './DagNode';
 import DenseTrace from './DenseTrace';
 
+// import type { DiffMembers } from './DagNode';
 import type { NodeID } from './types';
 import type { Trace } from '../../types/trace';
 
-type DiffCounts = {
-  a: number,
-  b: number,
-};
-
-export default class TraceDag<T = void> {
+export default class TraceDag {
   static newFromTrace(trace: Trace) {
-    const dt: TraceDag<> = new TraceDag();
+    const dt: TraceDag = new TraceDag();
     dt._initFromTrace(trace);
     return dt;
   }
 
-  static diff(a: TraceDag<any>, b: TraceDag<any>) {
-    const dt: TraceDag<DiffCounts> = new TraceDag();
+  static diff(a: TraceDag, b: TraceDag) {
+    const dt: TraceDag = new TraceDag();
     let key = 'a';
 
-    function pushDagNode(src: DagNode<any>) {
-      const node = dt._getDagNode(src.service, src.operation, src.parentID, { a: 0, b: 0 });
+    function pushDagNode(src: DagNode) {
+      const node = dt._getDagNode(src.service, src.operation, src.parentID);
       const { data } = node;
-      data[key] = src.count;
-      node.count = data.b - data.a;
+      // data[key] = src.count;
+      data[key] = src;
+      // node.count = data.b - data.a;
+      // node.count = data.b - data.a;
       if (!node.parentID) {
         dt.rootIDs.add(node.id);
       }
@@ -53,7 +51,7 @@ export default class TraceDag<T = void> {
   }
 
   denseTrace: ?DenseTrace;
-  nodesMap: Map<NodeID, DagNode<T>>;
+  nodesMap: Map<NodeID, DagNode>;
   rootIDs: Set<NodeID>;
 
   constructor() {
@@ -62,18 +60,18 @@ export default class TraceDag<T = void> {
     this.rootIDs = new Set();
   }
 
-  _initFromTrace(trace: Trace, data: T) {
+  _initFromTrace(trace: Trace) {
     this.denseTrace = new DenseTrace(trace);
-    [...this.denseTrace.rootIDs].forEach(id => this._addDenseSpan(id, null, data));
+    [...this.denseTrace.rootIDs].forEach(id => this._addDenseSpan(id, null));
   }
 
-  _getDagNode(service: string, operation: string, parentID?: ?NodeID, data: T): DagNode<T> {
+  _getDagNode(service: string, operation: string, parentID?: ?NodeID): DagNode {
     const nodeID = DagNode.getID(service, operation, parentID);
     let node = this.nodesMap.get(nodeID);
     if (node) {
       return node;
     }
-    node = new DagNode(service, operation, parentID, data);
+    node = new DagNode(service, operation, parentID);
     this.nodesMap.set(nodeID, node);
     if (!parentID) {
       this.rootIDs.add(nodeID);
@@ -86,7 +84,7 @@ export default class TraceDag<T = void> {
     return node;
   }
 
-  _addDenseSpan(spanID: string, parentNodeID?: ?NodeID, data: T) {
+  _addDenseSpan(spanID: string, parentNodeID?: ?NodeID) {
     const denseSpan = this.denseTrace && this.denseTrace.denseSpansMap.get(spanID);
     if (!denseSpan) {
       console.warn(`Missing dense span: ${spanID}`);
@@ -95,12 +93,13 @@ export default class TraceDag<T = void> {
     const { children, operation, service, skipToChild } = denseSpan;
     let nodeID: ?string = null;
     if (!skipToChild) {
-      const node = this._getDagNode(service, operation, parentNodeID, data);
-      node.count++;
+      const node = this._getDagNode(service, operation, parentNodeID);
+      // node.count++;
+      node.members.push(denseSpan);
       nodeID = node.id;
     } else {
       nodeID = parentNodeID;
     }
-    [...children].forEach(id => this._addDenseSpan(id, nodeID, data));
+    [...children].forEach(id => this._addDenseSpan(id, nodeID));
   }
 }
diff --git a/packages/jaeger-ui/src/model/trace-dag/convPlexus.js b/packages/jaeger-ui/src/model/trace-dag/convPlexus.js
index 2342822aaf..a0b86473eb 100644
--- a/packages/jaeger-ui/src/model/trace-dag/convPlexus.js
+++ b/packages/jaeger-ui/src/model/trace-dag/convPlexus.js
@@ -16,10 +16,11 @@
 
 import DagNode from './DagNode';
 
+// import type { DiffMembers } from './DagNode';
 import type { NodeID, PEdge, PVertex } from './types';
 
-export default function convPlexus<T>(nodesMap: Map<NodeID, DagNode<T>>) {
-  const vertices: PVertex<T>[] = [];
+export default function convPlexus(nodesMap: Map<NodeID, DagNode>) {
+  const vertices: PVertex[] = [];
   const edges: PEdge[] = [];
   const ids = [...nodesMap.keys()];
   const keyMap: Map<string, ?number> = new Map(ids.map((id: NodeID, i: number) => [id, i]));
@@ -32,7 +33,7 @@ export default function convPlexus<T>(nodesMap: Map<NodeID, DagNode<T>>) {
     }
     vertices.push({
       key: i,
-      label: `${dagNode.count} | ${dagNode.operation}`,
+      // label: `${dagNode.count} | ${dagNode.operation}`,
       data: dagNode,
     });
     const parentKey = dagNode.parentID && keyMap.get(dagNode.parentID);
diff --git a/packages/jaeger-ui/src/model/trace-dag/types.js b/packages/jaeger-ui/src/model/trace-dag/types.js
index 5526d15038..ddf209d29b 100644
--- a/packages/jaeger-ui/src/model/trace-dag/types.js
+++ b/packages/jaeger-ui/src/model/trace-dag/types.js
@@ -31,9 +31,9 @@ export type DenseSpan = {
   children: Set<string>,
 };
 
-export type PVertex<T> = {
+export type PVertex = {
   key: string | number,
-  data: DagNode<T>,
+  data: DagNode,
 };
 
 export type PEdge = {
diff --git a/packages/jaeger-ui/src/types/trace-diff.js b/packages/jaeger-ui/src/types/trace-diff.js
index 932f18ba75..a3ffb55666 100644
--- a/packages/jaeger-ui/src/types/trace-diff.js
+++ b/packages/jaeger-ui/src/types/trace-diff.js
@@ -18,4 +18,7 @@ export type TraceDiffState = {
   a: ?string,
   b: ?string,
   cohort: string[],
+  metric: ?string,
+  scale: ?string,
+  scaleOn: ?string,
 };
diff --git a/yarn.lock b/yarn.lock
index 7a352df0a2..fd18452d2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3018,6 +3018,10 @@ d3-color@1, d3-color@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
 
+d3-color@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a"
+
 d3-color@~0.3.2:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-0.3.4.tgz#eba2fa9532513998b623a077c3b5149cb1df53d7"
@@ -3072,6 +3076,12 @@ d3-interpolate@1, d3-interpolate@^1.1.4:
   dependencies:
     d3-color "1"
 
+d3-interpolate@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.2.0.tgz#40d81bd8e959ff021c5ea7545bc79b8d22331c41"
+  dependencies:
+    d3-color "1"
+
 d3-interpolate@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-0.2.1.tgz#0f0d7364e40ab5e7f2ebd010de1539c5e6711991"
@@ -3094,7 +3104,7 @@ d3-sankey-align@^0.1.0:
     d3-collection "~0.1.0"
     d3-interpolate "~0.2.0"
 
-d3-scale@^1.0.5, d3-scale@^1.0.6:
+d3-scale@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
   dependencies:
@@ -3106,6 +3116,17 @@ d3-scale@^1.0.5, d3-scale@^1.0.6:
     d3-time "1"
     d3-time-format "2"
 
+d3-scale@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.1.0.tgz#8d3fd3e2a7c9080782a523c08507c5248289eef8"
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
 d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.0.tgz#d53772382d3dc4f7507bfb28bcd2d6aed2a0ad6d"
@@ -4900,14 +4921,6 @@ fs-extra@^1.0.0:
     jsonfile "^2.1.0"
     klaw "^1.0.0"
 
-fs-extra@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-
 fs-extra@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"