Skip to content

Commit

Permalink
Use histogram for distribution
Browse files Browse the repository at this point in the history
  • Loading branch information
@zsxwing
zsxwing committed Apr 23, 2015
1 parent 5688702 commit 881c907
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 41 deletions.
11 changes: 10 additions & 1 deletion core/src/main/resources/org/apache/spark/ui/static/streaming-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

.axis path, .axis line {
fill: none;
stroke: #000;
stroke: gray;
shape-rendering: crispEdges;
}

Expand All @@ -35,3 +35,12 @@
stroke: steelblue;
stroke-width: 1.5px;
}

.bar rect {
fill: steelblue;
shape-rendering: crispEdges;
}

.bar rect:hover {
fill: orange;
}
85 changes: 45 additions & 40 deletions core/src/main/resources/org/apache/spark/ui/static/streaming-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ var graphTooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
.text("");

// Show "text" at location (x, y)
function showGraphTooltip(text, x, y) {
var left = x;
var top = y;
graphTooltip.style("visibility", "visible")
.style("top", x + "px")
.style("left", y + "px")
.style("top", top + "px")
.style("left", left + "px")
.text(text);
}

Expand All @@ -52,7 +54,14 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) {
var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]);

var timeFormat = d3.time.format("%H:%M:%S")
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(timeFormat);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10)
.tickFormat(function(d) {
if (d.getTime() == minX || d.getTime() == maxX) {
return timeFormat(d);
} else {
return "x";
}
});
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

var line = d3.svg.line()
Expand All @@ -77,6 +86,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) {
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(0," + (-3) + ")")
.text(unitY);

svg.append("path")
Expand All @@ -97,7 +107,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) {
.attr("r", function(d) { return 3; })
.on('mouseover', function(d) {
var tip = d.y + " " + unitY + " at " + timeFormat(new Date(d.x));
showGraphTooltip(tip, event.pageY-25, event.pageX);
showGraphTooltip(tip, d3.event.pageX + 5, d3.event.pageY - 25);
// show the point
d3.select(this)
.attr("stroke", "steelblue")
Expand Down Expand Up @@ -126,7 +136,8 @@ function drawDistribution(id, values, minY, maxY, unitY) {
var width = 300 - margin.left - margin.right;
var height = 150 - margin.top - margin.bottom;

var binCount = values.length > 100 ? 100 : values.length;
//var binCount = values.length > 100 ? 100 : values.length;
var binCount = 10;
var formatBinValue = d3.format(",.2f");

var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]);
Expand All @@ -139,10 +150,6 @@ function drawDistribution(id, values, minY, maxY, unitY) {
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

var line = d3.svg.line()
.x(function(d) { return x(d.y); })
.y(function(d) { return y(d.x); });

var svg = d3.select(id).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
Expand All @@ -158,37 +165,35 @@ function drawDistribution(id, values, minY, maxY, unitY) {
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(0," + (-3) + ")")
.text(unitY);

svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);

// Add points to the line. However, we make it invisible at first. But when the user moves mouse
// over a point, it will be displayed with its detail.
svg.selectAll(".point")
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("circle")
.attr("stroke", "white") // white and opacity = 0 make it invisible
.attr("fill", "white")
.attr("opacity", "0")
.attr("cx", function(d) { return x(d.y); })
.attr("cy", function(d) { return y(d.x); })
.attr("r", function(d) { return 3; })
.on('mouseover', function(d) {
var tip = "[" + formatBinValue(d.x) + ", " + formatBinValue(d.x + d.dx) + "): " + d.y;
showGraphTooltip(tip, event.pageY, event.pageX + 10);
d3.select(this)
.attr("stroke", "steelblue")
.attr("fill", "steelblue")
.attr("opacity", "1");
})
.on('mouseout', function() {
hideGraphTooltip();
d3.select(this)
.attr("stroke", "white")
.attr("fill", "white")
.attr("opacity", "0");
});
.enter().append("g")
.attr("transform", function(d) { return "translate(0," + (y(d.x) - height + y(d.dx)) + ")";})
.attr("class", "bar").append("rect")
.attr("width", function(d) { return x(d.y); })
.attr("height", function(d) { return height - y(d.dx); })
.on('mouseover', function(d) {
var tip = "[" + formatBinValue(d.x) + ", " + formatBinValue(d.x + d.dx) + "): " + d.y;

// Calculate the location for tip
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var target = d3.event.target;
var matrix = target.getScreenCTM();
var targetBBox = target.getBBox();
var point = svg.node().ownerSVGElement.createSVGPoint();
point.x = targetBBox.x;
point.y = targetBBox.y;
var bbox = point.matrixTransform(matrix);
var tipX = bbox.x + scrollLeft + x(d.y) + 2;
var tipY = bbox.y + scrollTop - 6;

showGraphTooltip(tip, tipX, tipY);
})
.on('mouseout', function() {
hideGraphTooltip();
});
}

0 comments on commit 881c907

Please sign in to comment.