Add D3 javascript visualization of chunk statistics generated by StatsCollector

This commit is contained in:
Erik Broberg
2016-06-24 16:35:35 -04:00
parent b9f3b03af3
commit 6843b37a3d
4 changed files with 163 additions and 6 deletions

View File

@@ -43,6 +43,8 @@
#define _USE_MATH_DEFINES
#include <math.h>
#include <ctime>
namespace {
const std::string _loggerCat = "ChunkLodGlobe";
}
@@ -66,6 +68,7 @@ namespace openspace {
, maxSplitDepth(22)
, _savedCamera(nullptr)
, _tileProviderManager(tileProviderManager)
, stats(StatsCollector(absPath("test_stats")))
{
auto geometry = std::make_shared<SkirtedGrid>(
@@ -84,6 +87,7 @@ namespace openspace {
_chunkEvaluatorByDistance = std::make_unique<EvaluateChunkLevelByDistance>();
_renderer = std::make_unique<ChunkRenderer>(geometry, tileProviderManager);
}
ChunkedLodGlobe::~ChunkedLodGlobe() {
@@ -146,9 +150,23 @@ namespace openspace {
desiredLevel = glm::clamp(desiredLevel, minSplitDepth, maxSplitDepth);
return desiredLevel;
}
void ChunkedLodGlobe::render(const RenderData& data){
stats.startNewRecord();
int j2000s = Time::now().unsyncedJ2000Seconds();
int lastJ2000s = stats.i.previous("time");
if (j2000s == lastJ2000s) {
stats.disable();
}
else {
stats.enable();
}
stats.i["time"] = j2000s;
minDistToCamera = INFINITY;
_leftRoot->updateChunkTree(data);
@@ -162,10 +180,16 @@ namespace openspace {
// Render function
std::function<void(const ChunkNode&)> renderJob = [this, &data, &mvp](const ChunkNode& chunkNode) {
stats.i["chunks"]++;
const Chunk& chunk = chunkNode.getChunk();
if (chunkNode.isLeaf() && chunk.isVisible()) {
_renderer->renderChunk(chunkNode.getChunk(), data);
debugRenderChunk(chunk, mvp);
if (chunkNode.isLeaf()){
stats.i["chunks leafs"]++;
if (chunk.isVisible()) {
stats.i["rendered chunks"]++;
double t0 = Time::now().unsyncedJ2000Seconds();
_renderer->renderChunk(chunkNode.getChunk(), data);
debugRenderChunk(chunk, mvp);
}
}
};

View File

@@ -117,6 +117,7 @@ namespace openspace {
bool levelByProjAreaElseDistance = true;
} debugOptions;
StatsCollector stats;
private:
@@ -149,8 +150,6 @@ namespace openspace {
std::shared_ptr<TileProviderManager> _tileProviderManager;
//std::shared_ptr<StatsTracker<double>> _stats;
//StatsTracker<double> stats;
};
} // namespace openspace

114
monitor/index.html Normal file
View File

@@ -0,0 +1,114 @@
<html lang="en">
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<svg></svg>
</body>
<script type="text/javascript">
function doVis(){
var filename = "../data/scene/debugglobe/test_stats";
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
//.interpolate("basis")
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.value); });
d3.select("svg").remove();
var svg = d3.select("body").append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv(filename, function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time"; }));
data.forEach(function(d) {
d.time = new Date(+d.time);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {time: d.time, value: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.time; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
}
doVis();
//setInterval(doVis, 1000);
</script>
</html>

20
monitor/style.css Normal file
View File

@@ -0,0 +1,20 @@
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}