206 lines
6.4 KiB
HTML
206 lines
6.4 KiB
HTML
{::nomarkdown}
|
|
{% assign fn = include.id | remove: " " | remove: "-" | downcase %}
|
|
<figure><a href="{{ include.url }}"><svg id="{{ include.id }}" width=500 height=200 onload="render_{{ fn }}()"><title>{{ include.title }}</title></svg></a></figure>
|
|
<script>
|
|
function render_{{ fn }}() {
|
|
d3.csv("{{ include.url }}", function(d, i, columns) {
|
|
return d; // Transformed below.
|
|
}, function(error, data) {
|
|
if (error) throw(error);
|
|
|
|
// Create a new data that pivots on runtime.
|
|
//
|
|
// To start, we have:
|
|
// runtime, ..., result
|
|
// runc, ..., 1
|
|
// runsc, ..., 2
|
|
//
|
|
// In the end we want:
|
|
// ..., runsc, runc
|
|
// ..., 1, 2
|
|
|
|
// Filter by metric, if required.
|
|
if ("{{ include.metric }}" != "") {
|
|
orig_columns = data.columns;
|
|
data = data.filter(d => d.metric == "{{ include.metric }}");
|
|
data.columns = orig_columns;
|
|
}
|
|
|
|
// Filter by method, if required.
|
|
if ("{{ include.method }}" != "") {
|
|
orig_columns = data.columns;
|
|
data = data.filter(d => d.method == "{{ include.method }}");
|
|
data.columns = orig_columns.filter(key => key != "method");
|
|
}
|
|
|
|
// Enumerate runtimes.
|
|
var runtimes = Array.from(new Set(data.map(d => d.runtime)));
|
|
var metrics = Array.from(new Set(data.map(d => d.metric)));
|
|
if (metrics.length < 1) {
|
|
console.log(data);
|
|
throw("need at least one metric");
|
|
} else if (metrics.length == 1) {
|
|
metric = metrics[0];
|
|
data.columns = data.columns.filter(key => key != "metric");
|
|
} else {
|
|
metric = ""; // Used for grouping.
|
|
}
|
|
|
|
var isSubset = function(a, sup) {
|
|
var ap = Object.getOwnPropertyNames(a);
|
|
for (var i = 0; i < ap.length; i++) {
|
|
if (a[ap[i]] !== sup[ap[i]]) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// Execute a pivot to include runtimes as attributes.
|
|
var new_data = data.map(function(data_item) {
|
|
// Generate a prototype data item.
|
|
var proto_item = Object.assign({}, data_item);
|
|
delete proto_item.runtime;
|
|
delete proto_item.result;
|
|
var next_item = Object.assign({}, proto_item);
|
|
|
|
// Find all matching runtime items.
|
|
data.forEach(function(d) {
|
|
if (isSubset(proto_item, d)) {
|
|
// Add the result result.
|
|
next_item[d.runtime] = d.result;
|
|
}
|
|
});
|
|
return next_item;
|
|
});
|
|
|
|
// Remove any duplication.
|
|
new_data = Array.from(new Set(new_data));
|
|
new_data.columns = data.columns;
|
|
new_data.columns = new_data.columns.filter(key => key != "runtime" && key != "result");
|
|
new_data.columns = new_data.columns.concat(runtimes);
|
|
data = new_data;
|
|
|
|
// Slice based on the first key.
|
|
if (data.columns.length != runtimes.length) {
|
|
x0_key = new_data.columns[0];
|
|
var x1_domain = data.columns.slice(1);
|
|
} else {
|
|
x0_key = "runtime";
|
|
var x1_domain = runtimes;
|
|
}
|
|
|
|
// Determine varaible margins.
|
|
var x0_domain = data.map(d => d[x0_key]);
|
|
var margin_bottom_pad = 0;
|
|
if (x0_domain.length > 8) {
|
|
margin_bottom_pad = 50;
|
|
}
|
|
|
|
// Use log scale if required.
|
|
var y_min = 0;
|
|
if ({{ include.log | default: "false" }}) {
|
|
// Need to cap lower end of the domain at 1.
|
|
y_min = 1;
|
|
}
|
|
|
|
if ({{ include.y_min | default: "false" }}) {
|
|
y_min = "{{ include.y_min }}";
|
|
}
|
|
|
|
var svg = d3.select("#{{ include.id }}"),
|
|
margin = {top: 20, right: 20, bottom: 30 + margin_bottom_pad, left: 50},
|
|
width = +svg.attr("width") - margin.left - margin.right,
|
|
height = +svg.attr("height") - margin.top - margin.bottom,
|
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
var x0 = d3.scaleBand()
|
|
.rangeRound([margin.left / 2, width - (4 * margin.right)])
|
|
.paddingInner(0.1);
|
|
|
|
var x1 = d3.scaleBand()
|
|
.padding(0.05);
|
|
|
|
var y = d3.scaleLinear()
|
|
.rangeRound([height, 0]);
|
|
if ({{ include.log | default: "false" }}) {
|
|
y = d3.scaleLog()
|
|
.rangeRound([height, 0]);
|
|
}
|
|
|
|
var z = d3.scaleOrdinal()
|
|
.range(["#262362", "#FBB03B", "#286FD7", "#6b486b"]);
|
|
|
|
// Set all domains.
|
|
x0.domain(x0_domain);
|
|
x1.domain(x1_domain).rangeRound([0, x0.bandwidth()]);
|
|
y.domain([y_min, d3.max(data, d => d3.max(x1_domain, key => parseFloat(d[key])))]).nice();
|
|
|
|
// The data.
|
|
g.append("g")
|
|
.selectAll("g")
|
|
.data(data)
|
|
.enter().append("g")
|
|
.attr("transform", function(d) { return "translate(" + x0(d[x0_key]) + ",0)"; })
|
|
.selectAll("rect")
|
|
.data(d => x1_domain.map(key => ({key, value: d[key]})))
|
|
.enter().append("rect")
|
|
.attr("x", d => x1(d.key))
|
|
.attr("y", d => y(d.value))
|
|
.attr("width", x1.bandwidth())
|
|
.attr("height", d => y(y_min) - y(d.value))
|
|
.attr("fill", d => z(d.key));
|
|
|
|
// X0 ticks and labels.
|
|
var x0_axis = g.append("g")
|
|
.attr("class", "axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x0));
|
|
if (x0_domain.length > 8) {
|
|
x0_axis.selectAll("text")
|
|
.style("text-anchor", "end")
|
|
.attr("dx", "-.8em")
|
|
.attr("dy", ".15em")
|
|
.attr("transform", "rotate(-65)");
|
|
}
|
|
|
|
// Y ticks and top-label.
|
|
if (metric == "default") {
|
|
metric = ""; // Don't display.
|
|
}
|
|
g.append("g")
|
|
.attr("class", "axis")
|
|
.call(d3.axisLeft(y).ticks(null, "s"))
|
|
.append("text")
|
|
.attr("x", -30.0)
|
|
.attr("y", y(y.ticks().pop()) - 10.0)
|
|
.attr("dy", "0.32em")
|
|
.attr("fill", "#000")
|
|
.attr("font-weight", "bold")
|
|
.attr("text-anchor", "start")
|
|
.text(metric);
|
|
|
|
// The legend.
|
|
var legend = g.append("g")
|
|
.attr("font-family", "sans-serif")
|
|
.attr("font-size", 10)
|
|
.attr("text-anchor", "end")
|
|
.selectAll("g")
|
|
.data(x1_domain.slice().reverse())
|
|
.enter().append("g")
|
|
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
|
|
legend.append("rect")
|
|
.attr("x", width - 19)
|
|
.attr("width", 19)
|
|
.attr("height", 19)
|
|
.attr("fill", z);
|
|
legend.append("text")
|
|
.attr("x", width - 24)
|
|
.attr("y", 9.5)
|
|
.attr("dy", "0.32em")
|
|
.text(function(d) { return d; });
|
|
});
|
|
}
|
|
</script>
|
|
{:/}
|