(no commit message)

diff --git a/performance/index.html b/performance/index.html
index c3ff36f..46effc7 100644 (file)
--- a/performance/index.html
+++ b/performance/index.html
@@ -1 +1,172 @@
 <h2>DragonFly BSD Performance</h2>
+
+
+<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+<script type="text/javascript" src="d3.v2.min.js"></script>
+<style>
+.chart {
+    width: 680px;
+    height: 428px;
+    background-image: url("chart_bg.png");
+    background-repeat: no-repeat;
+    background-position: right top;
+}
+
+/*
+ * SVG Styles follow
+ */
+path {
+  stroke-width: 1;
+  fill: none;
+  stroke: #666;
+}
+
+path.df32 {
+  stroke-width: 2.5;
+  stroke: #ffcc00;
+}
+
+path.swapcache {
+  stroke-width: 2.5;
+  stroke: #ff3300;
+}
+
+line {
+    stroke: black;
+}
+ 
+text {
+    font-family: Arial;
+    font-size: 9pt;
+}
+
+</style>
+<script>
+$(document).ready(function(){
+var chart_width = 600;
+var chart_height = 348;
+var chart_margin = 80; // Margin is at left and bottom only
+var chart_padding = 20; // padding is at top and right
+
+var perf_swapcache_data = [
+    {title: "DragonFly BSD 3.2", values: [100.00, 99.72, 5.78, 1.49, 0.96, 0.84, 0.64]},
+    {title: "With Swapcache", values: [99.48, 99.03, 78.30, 49.40, 37.95, 31.06, 27.17]}
+];
+var swapcache_x = ["50%", "75%", "100%", "125%", "150%", "175%", "200%"];
+
+var xscaler = d3.scale.linear()
+    .domain([0, 6])
+    .range([chart_margin, chart_width + chart_margin]);
+var yscaler = d3.scale.linear()
+    .domain([100, 0])
+    .range([chart_padding, chart_height]);
+
+var xaxis = d3.svg.axis()
+    .scale(xscaler)
+    .orient("bottom")
+    .ticks(6);
+var yaxis = d3.svg.axis()
+    .scale(yscaler)
+    .orient("left")
+    .ticks(4);
+
+var chart = d3.select("#swapcache_chart")
+    .append("svg:svg")
+    .attr("width", chart_width + chart_margin + chart_padding)
+    .attr("height", chart_height + chart_margin + chart_padding);
+
+/*
+ * The line function uses the scalers and kicks back x,y coordinates for
+ * points.
+ */
+var linefn = d3.svg.line()
+    .x(function(d,i) {
+        return (xscaler(i));
+    })
+    .y(function(d) {
+        return (yscaler(d));
+    });
+
+/*
+ * Add a container for the lines
+ */
+var chart_data = chart.append("svg:g")
+    .attr("transform", "translate(0, 0)");
+
+/*
+ * Add the data to chart
+ */
+chart_data.append("svg:path")
+    .attr("class", "df32")
+    .attr("d", linefn(perf_swapcache_data[0].values));
+chart_data.append("svg:path")
+    .attr("class", "swapcache")
+    .attr("d", linefn(perf_swapcache_data[1].values));
+
+/*
+ * Add the X axis
+ */
+chart.append("svg:g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0, " + (chart_height + 1) + ")")
+    .call(xaxis)
+    .selectAll("text")
+    .text(function(d) {
+        return (swapcache_x[parseInt(d)]);
+    });
+
+/*
+ * Add the Y axis
+ */
+chart.append("svg:g")
+    .attr("class", "y axis")
+    .attr("transform", "translate(" + (chart_margin) + ", 0)")
+    .call(yaxis)
+    .selectAll("text")
+    .text(function(d) {
+console.log(d);
+        return (d + "%");
+    });
+       
+/*
+ * Add labels
+ */
+chart.append("svg:text")
+    .attr("class", "xlabel")
+       .attr("x", 265)
+       .attr("y", chart_height + chart_padding + 20)
+    .text("Database size relative to main memory size");
+
+chart.append("svg:text")
+    .attr("class", "ylabel")
+    .attr("x", -50)
+    .attr("y", 25)
+    .attr("text-anchor", "end")
+       .attr("transform", "rotate(-90)")
+       .text("Percentage of performance relative to maximum");
+
+/*
+ * Add key
+ */
+var k = chart.append("svg:g")
+    .attr("transform", "translate(450, 20)");
+
+k.append("svg:text")
+    .attr("x", 110)
+    .text(perf_swapcache_data[0].title);
+k.append("svg:path")
+    .attr("class", "df32")
+       .attr("d", "M0 -5 L100 -5");
+k.append("svg:text")
+    .attr("x", 110)
+    .attr("y", 20)
+    .text(perf_swapcache_data[1].title);
+k.append("svg:path")
+    .attr("class", "swapcache")
+       .attr("d", "M0 15 L100 15");
+
+}); /* document.ready */
+</script>
+
+<div id="swapcache_chart" class="chart container">
+</div>