Initialize the graphics benchmark's Kalman filter with estimated 60 FPS
[WebKit-https.git] / 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             .interpolate("basis")
34             .x(function(d) { return x(d.timeOffset); })
35             .y(function(d) { return yLeft(d.values[0]); });
36
37     var lineRight = d3.svg.line()
38             .interpolate("basis")
39             .x(function(d) { return x(d.timeOffset); })
40             .y(function(d) { return yRight(d.values[1]); });
41
42     samples.forEach(function(d) {
43         d.timeOffset = +d.timeOffset;
44         d.values[0] = +d.values[0];
45         d.values[1] = +d.values[1];        
46     });    
47
48     var sampledSamples = samples.filter(function(d) {
49         return d.timeOffset >= samplingTimeOffset;
50     });
51     
52     var meanLeft = d3.mean(sampledSamples, function(d) {
53         return +d.values[0];
54     });
55
56     var meanRight = d3.mean(sampledSamples, function(d) {
57         return +d.values[1];
58     });
59                             
60     var svg = d3.select(selector).append("svg")
61         .attr("width", size.width + margins.left + margins.right)
62         .attr("height", size.height + margins.top + margins.bottom)
63         .append("g")
64             .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
65
66     // x-axis
67     svg.append("g")
68         .attr("class", "x axis")
69         .attr("fill", "rgb(235, 235, 235)")
70         .attr("transform", "translate(0," + size.height + ")")
71         .call(xAxis)
72         .append("text")
73             .attr("class", "label")
74             .attr("x", size.width)
75             .attr("y", -6)
76             .attr("fill", "rgb(235, 235, 235)")
77             .style("text-anchor", "end")
78             .text("time");
79                  
80     // yLeft-axis
81     svg.append("g")
82         .attr("class", "y axis")
83         .attr("fill", "#7ADD49")
84         .call(yAxisLeft)
85         .append("text")
86             .attr("class", "label")
87             .attr("transform", "rotate(-90)")
88             .attr("y", 6)
89             .attr("fill", "#7ADD49")
90             .attr("dy", ".71em")
91             .style("text-anchor", "end")
92             .text(axes[0]);
93
94     // yRight-axis
95     svg.append("g")
96         .attr("class", "y axis")
97         .attr("fill", "#FA4925")
98         .attr("transform", "translate(" + size.width + ", 0)")
99         .call(yAxisRight)
100         .append("text")
101             .attr("class", "label")
102             .attr("transform", "rotate(-90)")
103             .attr("y", 6)
104             .attr("fill", "#FA4925")
105             .attr("dy", ".71em")
106             .style("text-anchor", "end")
107             .text(axes[1]);
108
109     // left-mean
110     svg.append("svg:line")
111         .attr("x1", x(0))
112         .attr("x2", size.width)
113         .attr("y1", yLeft(meanLeft))
114         .attr("y2", yLeft(meanLeft))
115         .attr("class", "left-mean");
116
117     // right-mean
118     svg.append("svg:line")
119         .attr("x1", x(0))
120         .attr("x2", size.width)
121         .attr("y1", yRight(meanRight))
122         .attr("y2", yRight(meanRight))
123         .attr("class", "right-mean");        
124
125     // samplingTimeOffset
126     svg.append("line")
127         .attr("x1", x(samplingTimeOffset))
128         .attr("x2", x(samplingTimeOffset))
129         .attr("y1", yLeft(0))
130         .attr("y2", yLeft(yAxisLeft.scale().domain()[1]))
131         .attr("class", "sample-time");
132
133     // left-samples
134     svg.append("path")
135         .datum(samples)
136         .attr("class", "left-samples")
137         .attr("d", lineLeft);
138         
139     // right-samples
140     svg.append("path")
141         .datum(samples)
142         .attr("class", "right-samples")
143         .attr("d", lineRight);
144 }