This repository has been archived by the owner on Jul 19, 2022. It is now read-only.
/
graph_index_template.html
129 lines (125 loc) · 6.15 KB
/
graph_index_template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Generated with d3-generator.com -->
<html>
<head>
<title>HHVM vs Zephir vs PHP · Simon Holywell - Web developer in Brighton</title>
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="description" content="Charts benchmark HHVM vs Zephir vs PHP">
<meta name="author" content="Simon Holywell">
<meta name="keywords" content="developer, php, simon holywell, holywell, treffynnon, England, Australia, Brighton, Worthing, Chichester, London">
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
function renderChart(hook_elem, data) {
var valueLabelWidth = 70; // space reserved for value labels (right)
var barHeight = 20; // height of one bar
var barLabelWidth = 280; // space reserved for bar labels
var barLabelPadding = 5; // padding between bar and bar labels (left)
var gridLabelHeight = 18; // space reserved for gridline labels
var gridChartOffset = 3; // space between start of grid and first bar
var maxBarWidth = 520; // width of the bar with the max value
// accessor functions
var barLabel = function(d) {
var ret = d.Dir;
if(0 != d.Title && '' != d.Title) {
ret += ' (' + d.Title + ')';
}
return ret;
};
var barValue = function(d) { return parseFloat(d['Time: Elapsed real time (in seconds) (Not in tcsh)']); };
// sorting
var sortedData = data.sort(function(a, b) {
return d3.ascending(barValue(a), barValue(b));
});
var getBarColour = function(d) {
if(d.Dir == 'PHP' || d.Dir == 'PHP Ext') {
return 'purple';
} else if(d.Dir.match(/$PHP Zephir/)) {
return 'yellow';
}
return 'steelblue';
};
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, sortedData.length)).rangeBands([0, sortedData.length * barHeight]);
var y = function(d, i) { return yScale(i); };
var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
var x = d3.scale.linear().domain([0, d3.max(sortedData, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select(hook_elem).append("svg")
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
.attr('height', gridLabelHeight + gridChartOffset + sortedData.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
.attr("x", x)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
labelsContainer.selectAll('text').data(sortedData).enter().append('text')
.attr('y', yText)
.attr('stroke', 'none')
.attr('fill', 'black')
.attr("dy", ".35em") // vertical-align: middle
.attr('text-anchor', 'end')
.text(barLabel);
// bars
var barsContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
barsContainer.selectAll("rect").data(sortedData).enter().append("rect")
.attr('y', y)
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return x(barValue(d)); })
.attr('stroke', 'white')
.attr('fill', function(d) {
return getBarColour(d);
});
// bar value labels
barsContainer.selectAll("text").data(sortedData).enter().append("text")
.attr("x", function(d) { return x(barValue(d)); })
.attr("y", yText)
.attr("dx", 3) // padding-left
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "start") // text-align: right
.attr("fill", "black")
.attr("stroke", "none")
.text(function(d) { return barValue(d); });
// start line
barsContainer.append("line")
.attr("y1", -gridChartOffset)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#000");
}
</script>
</head>
<body>
<h1>HHVM vs Zephir vs PHP</h1>
<p>These charts so the speed with which a benchmarking script ran the various
PHP runtimes. For more information please see my
<a href="http://simonholywell.com/post/2014/02/hhvm-vs-zephir-vs-php-the-showdown.html">related
blog post</a> and the
<a href="https://github.com/treffynnon/Benchmark-PHP-HHVM-Zephir">relevant
GitHub repository</a>.</p>
<p>A quick guide to the terms used:</p>
<dl>
<dt>Iterations</dt>
<dd>Number of times the script is executed.</dd>
<dt>Seed</dt>
<dd>The size of the Mandelbrot set to create. The higher the seed the
greater the work involved.</dd>
</dl>
{{ graphs }}
<p>Copyright © 2003 - 2014 Simon Holywell. All rights reserved.</p>
</body>
</html>