(no commit message)
[ikiwiki.git] / performance / index.html
CommitLineData
7616bc89 1<h2>DragonFly BSD Performance</h2>
b85e905b 2
3
4<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
5<script type="text/javascript" src="d3.v2.min.js"></script>
6<style>
7.chart {
8 width: 680px;
9 height: 428px;
10 background-image: url("chart_bg.png");
11 background-repeat: no-repeat;
12 background-position: right top;
13}
14
15/*
16 * SVG Styles follow
17 */
18path {
19 stroke-width: 1;
20 fill: none;
21 stroke: #666;
22}
23
24path.df32 {
25 stroke-width: 2.5;
26 stroke: #ffcc00;
27}
28
29path.swapcache {
30 stroke-width: 2.5;
31 stroke: #ff3300;
32}
33
34line {
35 stroke: black;
36}
37
38text {
39 font-family: Arial;
40 font-size: 9pt;
41}
42
43</style>
44<script>
45$(document).ready(function(){
46var chart_width = 600;
47var chart_height = 348;
48var chart_margin = 80; // Margin is at left and bottom only
49var chart_padding = 20; // padding is at top and right
50
51var perf_swapcache_data = [
52 {title: "DragonFly BSD 3.2", values: [100.00, 99.72, 5.78, 1.49, 0.96, 0.84, 0.64]},
53 {title: "With Swapcache", values: [99.48, 99.03, 78.30, 49.40, 37.95, 31.06, 27.17]}
54];
55var swapcache_x = ["50%", "75%", "100%", "125%", "150%", "175%", "200%"];
56
57var xscaler = d3.scale.linear()
58 .domain([0, 6])
59 .range([chart_margin, chart_width + chart_margin]);
60var yscaler = d3.scale.linear()
61 .domain([100, 0])
62 .range([chart_padding, chart_height]);
63
64var xaxis = d3.svg.axis()
65 .scale(xscaler)
66 .orient("bottom")
67 .ticks(6);
68var yaxis = d3.svg.axis()
69 .scale(yscaler)
70 .orient("left")
71 .ticks(4);
72
73var chart = d3.select("#swapcache_chart")
74 .append("svg:svg")
75 .attr("width", chart_width + chart_margin + chart_padding)
76 .attr("height", chart_height + chart_margin + chart_padding);
77
78/*
79 * The line function uses the scalers and kicks back x,y coordinates for
80 * points.
81 */
82var linefn = d3.svg.line()
83 .x(function(d,i) {
84 return (xscaler(i));
85 })
86 .y(function(d) {
87 return (yscaler(d));
88 });
89
90/*
91 * Add a container for the lines
92 */
93var chart_data = chart.append("svg:g")
94 .attr("transform", "translate(0, 0)");
95
96/*
97 * Add the data to chart
98 */
99chart_data.append("svg:path")
100 .attr("class", "df32")
101 .attr("d", linefn(perf_swapcache_data[0].values));
102chart_data.append("svg:path")
103 .attr("class", "swapcache")
104 .attr("d", linefn(perf_swapcache_data[1].values));
105
106/*
107 * Add the X axis
108 */
109chart.append("svg:g")
110 .attr("class", "x axis")
111 .attr("transform", "translate(0, " + (chart_height + 1) + ")")
112 .call(xaxis)
113 .selectAll("text")
114 .text(function(d) {
115 return (swapcache_x[parseInt(d)]);
116 });
117
118/*
119 * Add the Y axis
120 */
121chart.append("svg:g")
122 .attr("class", "y axis")
123 .attr("transform", "translate(" + (chart_margin) + ", 0)")
124 .call(yaxis)
125 .selectAll("text")
126 .text(function(d) {
127console.log(d);
128 return (d + "%");
129 });
130
131/*
132 * Add labels
133 */
134chart.append("svg:text")
135 .attr("class", "xlabel")
136 .attr("x", 265)
137 .attr("y", chart_height + chart_padding + 20)
138 .text("Database size relative to main memory size");
139
140chart.append("svg:text")
141 .attr("class", "ylabel")
142 .attr("x", -50)
143 .attr("y", 25)
144 .attr("text-anchor", "end")
145 .attr("transform", "rotate(-90)")
146 .text("Percentage of performance relative to maximum");
147
148/*
149 * Add key
150 */
151var k = chart.append("svg:g")
152 .attr("transform", "translate(450, 20)");
153
154k.append("svg:text")
155 .attr("x", 110)
156 .text(perf_swapcache_data[0].title);
157k.append("svg:path")
158 .attr("class", "df32")
159 .attr("d", "M0 -5 L100 -5");
160k.append("svg:text")
161 .attr("x", 110)
162 .attr("y", 20)
163 .text(perf_swapcache_data[1].title);
164k.append("svg:path")
165 .attr("class", "swapcache")
166 .attr("d", "M0 15 L100 15");
167
168}); /* document.ready */
169</script>
170
171<div id="swapcache_chart" class="chart container">
172</div>