<!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>