021f5f5d669de00fef39d2e92ccb39bc04655c1c
[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             .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 }