(no commit message)

[ikiwiki.git] / performance / index.html

<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>