diff options
Diffstat (limited to 'website/_includes/graph.html')
| -rw-r--r-- | website/_includes/graph.html | 205 |
1 files changed, 0 insertions, 205 deletions
diff --git a/website/_includes/graph.html b/website/_includes/graph.html deleted file mode 100644 index ba4cf9840..000000000 --- a/website/_includes/graph.html +++ /dev/null @@ -1,205 +0,0 @@ -{::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> -{:/} |