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>