diff --git a/perf/app/dashboard.go b/perf/app/dashboard.go
index fa6d764..6ba8a20 100644
--- a/perf/app/dashboard.go
+++ b/perf/app/dashboard.go
@@ -655,6 +655,7 @@
 	}
 
 	benchmark := r.FormValue("benchmark")
+	unit := r.FormValue("unit")
 	var benchmarks []*BenchmarkJSON
 	if benchmark == "" {
 		benchmarks, err = fetchDefaultBenchmarks(ctx, qc, start, end, repository, branch)
@@ -662,8 +663,14 @@
 		benchmarks, err = fetchAllBenchmarks(ctx, qc, false, start, end, repository, branch)
 	} else if benchmark == "regressions" {
 		benchmarks, err = fetchAllBenchmarks(ctx, qc, true, start, end, repository, branch)
-	} else {
+	} else if benchmark != "" && unit == "" {
 		benchmarks, err = fetchNamedBenchmark(ctx, qc, start, end, repository, branch, benchmark)
+	} else {
+		var result *BenchmarkJSON
+		result, err = fetchNamedUnitBenchmark(ctx, qc, start, end, repository, branch, benchmark, unit)
+		if result != nil && err == nil {
+			benchmarks = []*BenchmarkJSON{result}
+		}
 	}
 	if err == errBenchmarkNotFound {
 		log.Printf("Benchmark not found: %q", benchmark)
diff --git a/perf/app/dashboard/index.html b/perf/app/dashboard/index.html
index f18111e..e21cc97 100644
--- a/perf/app/dashboard/index.html
+++ b/perf/app/dashboard/index.html
@@ -12,6 +12,7 @@
 	<link rel="stylesheet" href="./static/style.css"/>
 	<script src="https://ajax.googleapis.com/ajax/libs/d3js/7.4.2/d3.min.js"></script>
 	<script src="./third_party/bandchart/bandchart.js"></script>
+	<script src="./static/range.js"></script>
 </head>
 
 <body class="Dashboard">
@@ -32,9 +33,12 @@
 	<form autocomplete="off" action="./">
 		<ul>
 			<li>
-				<div class="Dashboard-search">
+				<div class="Dashboard-search-benchmark">
 					<input id="benchmark-input" type="text" name="benchmark" placeholder="Type benchmark name..." />
 				</div>
+				<div class="Dashboard-search-unit">
+					<input id="unit-input" type="text" name="unit" placeholder="Unit (optional)" />
+				</div>
 				<input type="submit" />
 			</li>
 			<li><a href="?benchmark=all">All benchmarks</a></li>
@@ -81,23 +85,44 @@
 		for tested ("ok") / untested (empty) commits.
 	</p>
 	<p>
-		Also note that the 'branch' selection above is the Go branch
-		that benchmarking ran against on https://build.golang.org, not
-		the subrepo branch.
+		The 'branch' selection above is the Go branch that benchmarking
+		ran against on <a href=https://build.golang.org>the build dashboard</a>,
+		not the subrepo branch.
+	</p>
+	<p>
+		Using the 'unit' search box above leads to a page that shows much
+		more detail about each individual point in the selected time range.
+		Another way of reaching this page is to click the unit name that acts
+		as each graph's title, i.e. "sec/op".
 	</p>
 </div>
 
 <grid id="dashboard">
-	<h2 class="Dashboard-title" id="loading">Loading...</h2>
+	<grid id="loading" class="Dashboard-section Dashboard-section-expand">
+		<h2 class="Dashboard-title" id="loading">Loading...</h2>
+	</grid>
 </grid>
 
 <script>
+// minViewPercentDelta represents the minimum range we're willing to
+// let the Y axis have for charts and X axis for ranges in the per-unit
+// view. In both cases the unit of this value is a delta percent, hence
+// the name.
+//
+// This constant exists because allowing the axis' range to be arbitrarily
+// small produces results that are really noisy visually, even though they
+// represent virtually no change. For instance, a relatively low-noise
+// series of benchmark results, with a min delta of -0.05% and and +0.05%
+// might appear really noisy if we "zoom" in too far, when in actuality
+// the amount of noise is incredibly low.
+const minViewDeltaPercent = 0.025;
+
 function removeLoadingMessage() {
 	let loading = document.getElementById("loading");
 	loading.parentNode.removeChild(loading);
 }
 
-function addContent(benchmarks) {
+function addCharts(benchmarks) {
 	let dashboard = document.getElementById("dashboard");
 
 	removeLoadingMessage();
@@ -131,12 +156,111 @@
 		let item = document.createElement("div");
 		item.classList.add("Dashboard-grid-item");
 		item.appendChild(BandChart(bench.Values, {
+			benchmark: bench.Name,
 			unit: bench.Unit,
+			minViewDeltaPercent: minViewDeltaPercent,
 		}));
 		grid.appendChild(item);
 	}
 }
 
+function addTable(bench, unit) {
+	let dashboard = document.getElementById("dashboard");
+
+	removeLoadingMessage();
+
+	let section = document.createElement("grid");
+	section.classList.add("Dashboard-section");
+	section.classList.add("Dashboard-section-expand");
+	dashboard.appendChild(section);
+
+	let link = document.createElement("a");
+	link.href = "?benchmark=" + bench.Name + "&unit=" + unit;
+	link.textContent = bench.Name + " (" + unit + ")";
+
+	let title = document.createElement("h2");
+	title.classList.add("Dashboard-title");
+	title.appendChild(link);
+	section.appendChild(title);
+
+	const table = document.createElement("table");
+	table.classList.add("Dashboard-table");
+	section.appendChild(table);
+
+	const createCell = function(text, header) {
+		let elemType = "td";
+		if (header) {
+			elemType = "th";
+		}
+		const elem = document.createElement(elemType);
+		elem.textContent = text;
+		return elem;
+	}
+
+	// Create the header.
+	const header = document.createElement("tr");
+	header.appendChild(createCell("Date", true));
+	header.appendChild(createCell("Commit", true));
+	header.appendChild(createCell("Delta", true));
+	table.appendChild(header);
+
+	// Find the min and max.
+	let min = bench.Values[0].Low;
+	let max = bench.Values[0].High;
+	for (let i = 1; i < bench.Values.length; i++) {
+		if (bench.Values[i].Low < min) {
+			min = bench.Values[i].Low;
+		}
+		if (bench.Values[i].High > max) {
+			max = bench.Values[i].High;
+		}
+	}
+
+	// Clamp for presentation.
+	if (min < 0 && min > -minViewDeltaPercent) {
+		min = -minViewDeltaPercent
+	}
+	if (max > 0 && max < minViewDeltaPercent) {
+		max = minViewDeltaPercent
+	}
+	if (max-min < 2*minViewDeltaPercent) {
+		const amt = (2*minViewDeltaPercent-(max-min))/2;
+		max += amt;
+		min -= amt;
+	}
+
+	// Iterate backwards, showing the most recent first.
+	for (let i = bench.Values.length-1; i >= 0; i--) {
+		const v = bench.Values[i];
+
+		// Create a row per value.
+		const row = document.createElement("tr");
+
+		// Commit date.
+		row.appendChild(createCell(Intl.DateTimeFormat([], {
+			dateStyle: "long",
+			timeStyle: "short",
+		}).format(v.CommitDate), false));
+
+		// Commit hash.
+		const commitHash = createCell("", false);
+		const commitLink = document.createElement("a");
+		commitLink.href = "https://go.googlesource.com/go/+show/" + v.CommitHash;
+		commitLink.textContent = v.CommitHash.slice(0, 7);
+		commitHash.appendChild(commitLink);
+		commitHash.classList.add("Dashboard-table-commit")
+		row.appendChild(commitHash);
+
+		// Range visualization.
+		const range = createCell("", false);
+		range.appendChild(Range(v.Low, v.Center, v.High, min, max, 640, 32, bench.Unit));
+		range.classList.add("Dashboard-table-range")
+		row.appendChild(range);
+
+		table.appendChild(row);
+	}
+}
+
 function failure(name, response) {
 	let dashboard = document.getElementById("dashboard");
 
@@ -165,6 +289,12 @@
 		input.value = benchmark;
 	}
 
+	let unit = params.get('unit');
+	if (unit) {
+		let input = document.getElementById('unit-input');
+		input.value = unit;
+	}
+
 	let repository = params.get('repository');
 	if (repository) {
 		let select = document.getElementById('repository-select');
@@ -203,6 +333,7 @@
 
 // Fetch content.
 let benchmark = (new URLSearchParams(window.location.search)).get('benchmark');
+let unit = (new URLSearchParams(window.location.search)).get('unit');
 let dataURL = './data.json' + window.location.search;  // Pass through all URL params.
 fetch(dataURL)
 	.then(response => {
@@ -220,7 +351,16 @@
 			});
 		});
 
-		addContent(benchmarks);
+		// If we have an explicit unit, then there should be just one result.
+		if (unit) {
+			if (benchmarks.length !== 1) {
+				failure(benchmark, "got more that one benchmark when a unit was specified");
+				throw new Error("Data fetch failed");
+			}
+			addTable(benchmarks[0], unit);
+		} else {
+			addCharts(benchmarks);
+		}
 	});
 </script>
 
diff --git a/perf/app/dashboard/static/range.js b/perf/app/dashboard/static/range.js
new file mode 100644
index 0000000..dcff4c9
--- /dev/null
+++ b/perf/app/dashboard/static/range.js
@@ -0,0 +1,108 @@
+// Copyright 2022 The Go Authors.  All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+function Range(low, center, high, min, max, width, height, unit) {
+	const margin = 40;
+	const svg = d3.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [0, 0, width, height])
+		.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+
+	const goodColor = "#005AB5";
+	const badColor = "#DC3220";
+	const pickColor = function(n) {
+		const higherIsBetter = {
+			"B/s": true,
+			"ops/s": true
+		};
+		if (unit in higherIsBetter) {
+			if (n > 0) {
+				return goodColor;
+			}
+			return badColor;
+		}
+		if (n < 0) {
+			return goodColor;
+		}
+		return badColor;
+	};
+
+	const xScale = d3.scaleLinear([min, max], [margin, width-margin]);
+	const yBaseline = 3*height/4;
+
+	// Draw line.
+	const line = d3.line()
+		.x(d => xScale(d))
+		.y(yBaseline)
+
+	const partialStroke = function() {
+		return svg.append("path")
+			.attr("fill", "none")
+			.attr("stroke-width", 6);
+	}
+	if (high < 0) {
+		partialStroke().attr("stroke", pickColor(high))
+			.attr("d", line([low, high]));
+	} else if (low < 0 && high > 0) {
+		partialStroke().attr("stroke", pickColor(low))
+			.attr("d", line([low, 0]));
+		partialStroke().attr("stroke", pickColor(high))
+			.attr("d", line([0, high]));
+	} else {
+		partialStroke().attr("stroke", pickColor(low))
+			.attr("d", line([low, high]));
+	}
+
+	const tick = d3.line()
+		.x(d => xScale(d[0]))
+		.y(d => d[1])
+
+	const xTicks = [low, center, high];
+	for (const i in xTicks) {
+		svg.append("path")
+			.attr("fill", "none")
+			.attr("stroke", pickColor(xTicks[i]))
+			.attr("stroke-width", 2.5)
+			.attr("d", tick([[xTicks[i], yBaseline-4], [xTicks[i], yBaseline+4]]))
+	}
+
+	svg.append("text")
+		.attr("x", xScale(low)-4)
+		.attr("y", yBaseline+3)
+		.attr("fill", pickColor(low))
+		.attr("text-anchor", "end")
+		.attr("font-size", "11px")
+		.text(Intl.NumberFormat([], {
+			style: 'percent',
+			signDisplay: 'always',
+			minimumFractionDigits: 2,
+		}).format(low));
+
+	svg.append("text")
+		.attr("x", xScale(center))
+		.attr("y", height/2)
+		.attr("fill", pickColor(center))
+		.attr("text-anchor", "middle")
+		.attr("font-size", "16px")
+		.text(Intl.NumberFormat([], {
+			style: 'percent',
+			signDisplay: 'always',
+			minimumFractionDigits: 2,
+		}).format(center));
+
+	svg.append("text")
+		.attr("x", xScale(high)+4)
+		.attr("y", yBaseline+3)
+		.attr("fill", pickColor(high))
+		.attr("text-anchor", "start")
+		.attr("font-size", "11px")
+		.text(Intl.NumberFormat([], {
+			style: 'percent',
+			signDisplay: 'always',
+			minimumFractionDigits: 2,
+		}).format(high));
+
+	return svg.node();
+}
diff --git a/perf/app/dashboard/static/style.css b/perf/app/dashboard/static/style.css
index b050078..ba9f65c 100644
--- a/perf/app/dashboard/static/style.css
+++ b/perf/app/dashboard/static/style.css
@@ -109,10 +109,14 @@
   padding-left: 0.5rem;
 }
 
-.Dashboard-search {
+.Dashboard-search-benchmark {
   display: inline-block;
   width: 300px;
 }
+.Dashboard-search-unit {
+  display: inline-block;
+  width: 90px;
+}
 input, select {
   border: 1px solid transparent;
   background-color: #f4f4f4;
@@ -148,6 +152,10 @@
   flex-direction: row;
   margin: 8px;
 }
+.Dashboard-section-expand {
+  padding: 8px;
+  width: 100%;
+}
 .Dashboard-grid {
   display: flex;
   flex-direction: row;
@@ -156,3 +164,24 @@
 }
 .Dashboard-grid-item {
 }
+.Dashboard-table {
+  padding: 16px;
+  width: 100%;
+}
+.Dashboard-table tr:nth-child(2n+1) {
+  background: #f4f4f4;
+}
+.Dashboard-table th {
+  background: #e0ebf5;
+  color: #375eab;
+  text-align: center;
+}
+.Dashboard-table td {
+  padding: 8px;
+  text-align: center;
+}
+.Dashboard-table-commit {
+  font-family: monospace;
+}
+.Dashboard-table-range {
+}
diff --git a/third_party/bandchart/bandchart.js b/third_party/bandchart/bandchart.js
index 77f2d4f..67e36e5 100644
--- a/third_party/bandchart/bandchart.js
+++ b/third_party/bandchart/bandchart.js
@@ -10,7 +10,9 @@
 	marginLeft = 40, // left margin, in pixels
 	width = 480, // outer width, in pixels
 	height = 240, // outer height, in pixels
+	benchmark,
 	unit,
+	minViewDeltaPercent,
 } = {}) {
 	// Compute values.
 	const C = d3.map(data, d => d.CommitHash);
@@ -39,9 +41,9 @@
 	// For (2) set it at the top.
 	// For (3) make sure the Y=0 line is in the middle.
 	//
-	// Finally, make sure we don't get closer than 0.025,
+	// Finally, make sure we don't get closer than minViewDeltaPercent,
 	// because otherwise it just looks really noisy.
-	const minYDomain = [-0.025, 0.025];
+	const minYDomain = [-minViewDeltaPercent, minViewDeltaPercent];
 	if (yDomain[0] > 0) {
 		// (1)
 		yDomain[0] = 0;
@@ -98,13 +100,15 @@
 		.call(g => g.selectAll(".tick line").clone()
 			.attr("x2", width - marginLeft - marginRight)
 			.attr("stroke-opacity", 0.1))
-		.call(g => g.append("text")
-			.attr("x", xRange[0]-40)
-			.attr("y", 24)
-			.attr("fill", "currentColor")
-			.attr("text-anchor", "start")
-			.attr("font-size", "16px")
-			.text(unit));
+		.call(g => g.append("a")
+			.attr("xlink:href", "?benchmark=" + benchmark + "&unit=" + unit)
+			.append("text")
+				.attr("x", xRange[0]-40)
+				.attr("y", 24)
+				.attr("fill", "currentColor")
+				.attr("text-anchor", "start")
+				.attr("font-size", "16px")
+				.text(unit));
 
 	const defs = svg.append("defs")