<!DOCTYPE html> <meta charset=“utf-8”> <title>Spry</title> <style>
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; }
</style> <body> <script>
window.plotRuntimes = function() { for(var spec in window._spry){ renderChart(spec) } function renderChart(title) { var body = document.getElementsByTagName('body')[0] body.innerHTML += '<div class="chart"><h3>' + title + '</h3></div>' var margin = {top: 20, right: 20, bottom: 30, left: 50} var width = 960 - margin.left - margin.right var height = 500 - margin.top - margin.bottom var x = d3.scale.linear().range([0, width]) var y = d3.scale.linear().range([height, 0]) var xAxis = d3.svg.axis().scale(x).orient('bottom') var yAxis = d3.svg.axis().scale(y).orient('left') var line = d3.svg.line().x(function(d, i) { return x(i) }) .y(function(d) { return y(d.runtime) }) 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 + ')' ); var runtimes = window._spry[title] x.domain(d3.extent(runtimes, function(d, i) { return i; })); y.domain(d3.extent(runtimes, function(d) { return parseFloat(d.runtime); })); svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis) .append('text') .attr('x', 6) .attr('dx', '.71em') .style('text-anchor', 'end') .text('Revision'); 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('Runtime'); svg.append('path') .datum(runtimes) .attr('class', 'line') .attr('d', line); } }
</script> </body>