46effc785c69bcc12dd9e2e1dfda27d9810b4f51
[ikiwiki.git] / performance / index.html
1 <h2>DragonFly BSD Performance</h2>
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  */
18 path {
19   stroke-width: 1;
20   fill: none;
21   stroke: #666;
22 }
23
24 path.df32 {
25   stroke-width: 2.5;
26   stroke: #ffcc00;
27 }
28
29 path.swapcache {
30   stroke-width: 2.5;
31   stroke: #ff3300;
32 }
33
34 line {
35     stroke: black;
36 }
37  
38 text {
39     font-family: Arial;
40     font-size: 9pt;
41 }
42
43 </style>
44 <script>
45 $(document).ready(function(){
46 var chart_width = 600;
47 var chart_height = 348;
48 var chart_margin = 80; // Margin is at left and bottom only
49 var chart_padding = 20; // padding is at top and right
50
51 var 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 ];
55 var swapcache_x = ["50%", "75%", "100%", "125%", "150%", "175%", "200%"];
56
57 var xscaler = d3.scale.linear()
58     .domain([0, 6])
59     .range([chart_margin, chart_width + chart_margin]);
60 var yscaler = d3.scale.linear()
61     .domain([100, 0])
62     .range([chart_padding, chart_height]);
63
64 var xaxis = d3.svg.axis()
65     .scale(xscaler)
66     .orient("bottom")
67     .ticks(6);
68 var yaxis = d3.svg.axis()
69     .scale(yscaler)
70     .orient("left")
71     .ticks(4);
72
73 var 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  */
82 var 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  */
93 var chart_data = chart.append("svg:g")
94     .attr("transform", "translate(0, 0)");
95
96 /*
97  * Add the data to chart
98  */
99 chart_data.append("svg:path")
100     .attr("class", "df32")
101     .attr("d", linefn(perf_swapcache_data[0].values));
102 chart_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  */
109 chart.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  */
121 chart.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) {
127 console.log(d);
128         return (d + "%");
129     });
130         
131 /*
132  * Add labels
133  */
134 chart.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
140 chart.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  */
151 var k = chart.append("svg:g")
152     .attr("transform", "translate(450, 20)");
153
154 k.append("svg:text")
155     .attr("x", 110)
156     .text(perf_swapcache_data[0].title);
157 k.append("svg:path")
158     .attr("class", "df32")
159         .attr("d", "M0 -5 L100 -5");
160 k.append("svg:text")
161     .attr("x", 110)
162     .attr("y", 20)
163     .text(perf_swapcache_data[1].title);
164 k.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>