PerformanceTests/Animometer/runner/resources/graph.js

   1 function graph(selector, margins, axes, samples, samplingTimeOffset)
   2 {
   3     var element = document.querySelector(selector);
   4     element.innerHTML = '';
   5
   6     var size = Point.elementClientSize(element).subtract(margins.size);
   7
   8     var x = d3.scale.linear()
   9             .range([0, size.width])
  10             .domain(d3.extent(samples, function(d) { return d.timeOffset; }));
  11
  12     var yLeft = d3.scale.linear()
  13             .range([size.height, 0])
  14             .domain([0, d3.max(samples, function(d) { return d.values[0]; })]);
  15
  16     var yRight = d3.scale.linear()
  17             .range([size.height, 0])
  18             .domain([0, d3.max(samples, function(d) { return d.values[1]; })]);
  19
  20     var xAxis = d3.svg.axis()
  21             .scale(x)
  22             .orient("bottom");
  23
  24     var yAxisLeft = d3.svg.axis()
  25             .scale(yLeft)
  26             .orient("left");
  27
  28     var yAxisRight = d3.svg.axis()
  29             .scale(yRight)
  30             .orient("right");
  31
  32     var lineLeft = d3.svg.line()
  33             .x(function(d) { return x(d.timeOffset); })
  34             .y(function(d) { return yLeft(d.values[0]); });
  35
  36     var lineRight = d3.svg.line()
  37             .x(function(d) { return x(d.timeOffset); })
  38             .y(function(d) { return yRight(d.values[1]); });
  39
  40     samples.forEach(function(d) {
  41         d.timeOffset = +d.timeOffset;
  42         d.values[0] = +d.values[0];
  43         d.values[1] = +d.values[1];
  44     });
  45
  46     var sampledSamples = samples.filter(function(d) {
  47         return d.timeOffset >= samplingTimeOffset;
  48     });
  49
  50     var meanLeft = d3.mean(sampledSamples, function(d) {
  51         return +d.values[0];
  52     });
  53
  54     var meanRight = d3.mean(sampledSamples, function(d) {
  55         return +d.values[1];
  56     });
  57
  58     var svg = d3.select(selector).append("svg")
  59         .attr("width", size.width + margins.left + margins.right)
  60         .attr("height", size.height + margins.top + margins.bottom)
  61         .append("g")
  62             .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
  63
  64     // x-axis
  65     svg.append("g")
  66         .attr("class", "x axis")
  67         .attr("fill", "rgb(235, 235, 235)")
  68         .attr("transform", "translate(0," + size.height + ")")
  69         .call(xAxis)
  70         .append("text")
  71             .attr("class", "label")
  72             .attr("x", size.width)
  73             .attr("y", -6)
  74             .attr("fill", "rgb(235, 235, 235)")
  75             .style("text-anchor", "end")
  76             .text("time");
  77
  78     // yLeft-axis
  79     svg.append("g")
  80         .attr("class", "y axis")
  81         .attr("fill", "#7ADD49")
  82         .call(yAxisLeft)
  83         .append("text")
  84             .attr("class", "label")
  85             .attr("transform", "rotate(-90)")
  86             .attr("y", 6)
  87             .attr("fill", "#7ADD49")
  88             .attr("dy", ".71em")
  89             .style("text-anchor", "end")
  90             .text(axes[0]);
  91
  92     // yRight-axis
  93     svg.append("g")
  94         .attr("class", "y axis")
  95         .attr("fill", "#FA4925")
  96         .attr("transform", "translate(" + size.width + ", 0)")
  97         .call(yAxisRight)
  98         .append("text")
  99             .attr("class", "label")
 100             .attr("transform", "rotate(-90)")
 101             .attr("y", 6)
 102             .attr("fill", "#FA4925")
 103             .attr("dy", ".71em")
 104             .style("text-anchor", "end")
 105             .text(axes[1]);
 106
 107     // left-mean
 108     svg.append("svg:line")
 109         .attr("x1", x(0))
 110         .attr("x2", size.width)
 111         .attr("y1", yLeft(meanLeft))
 112         .attr("y2", yLeft(meanLeft))
 113         .attr("class", "left-mean");
 114
 115     // right-mean
 116     svg.append("svg:line")
 117         .attr("x1", x(0))
 118         .attr("x2", size.width)
 119         .attr("y1", yRight(meanRight))
 120         .attr("y2", yRight(meanRight))
 121         .attr("class", "right-mean");
 122
 123     // samplingTimeOffset
 124     svg.append("line")
 125         .attr("x1", x(samplingTimeOffset))
 126         .attr("x2", x(samplingTimeOffset))
 127         .attr("y1", yLeft(0))
 128         .attr("y2", yLeft(yAxisLeft.scale().domain()[1]))
 129         .attr("class", "sample-time");
 130
 131     // left-samples
 132     svg.append("path")
 133         .datum(samples)
 134         .attr("class", "left-samples")
 135         .attr("d", lineLeft);
 136
 137     // right-samples
 138     svg.append("path")
 139         .datum(samples)
 140         .attr("class", "right-samples")
 141         .attr("d", lineRight);
 142 }