About Me

My photo
Northglenn, Colorado, United States
I'm primarily a BI Developer on the Microsoft stack. I do sometimes touch upon other Microsoft stacks ( web development, application development, and sql server development).

Thursday, January 31, 2013

Graph written in javascript of a Normal Distribution Random Number Gen.





















Code Snippet
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Normal Distribution</title>
  7.     <link href="/Content/site.css" rel="stylesheet"/>
  8.  
  9.     <script src="/Scripts/modernizr-2.5.3.js"></script>
  10.  
  11.     <script src="/Scripts/jquery-1.7.1.js"></script>
  12.  
  13.     
  14. </head>
  15. <body>
  16.     
  17.  
  18. <h2 id="header" class="header">Normal Distribution</h2>
  19.  
  20. <canvas id="myCanvas" width="1600px" height="1200px" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.
  21. </canvas>
  22.  
  23. <script type="text/javascript">
  24.     function Point(X, Y) {this.X = X;this.Y = Y;};
  25.     function resizeFrame() {var h = $(window).height();var w = $(window).width();$("#myCanvas").css('height', h - 100); $("#myCanvas").css('width', w - 50);}
  26.     function canvas() {this.height = $(window).height();this.width = $(window).width();}
  27.  
  28.     $(document).ready(function () {
  29.         jQuery.event.add(window, "load", resizeFrame);
  30.         jQuery.event.add(window, "resize", resizeFrame);
  31.     });
  32.  
  33.     var min,max,headSpace;
  34.     var size = 100000;
  35.     var density = [];
  36.     var dcount = 0;
  37.     var normalValues = [];
  38.     var dmin = 9007199254740992;
  39.     var dmax = 0;
  40.     var colors = ['#0069a5', '#0098ee', '#7bd2f6', '#a8a8a8', '#55b5f5', '#223366'];
  41.     var g = document.getElementById("myCanvas");
  42.     var ctx = g.getContext("2d");
  43.     var notchColor = 'black';
  44.     var textColor = 'black';
  45.     var fontFamily = 'Arial';
  46.     var labelFontSize = 35;
  47.     var dataFontSize = 25;
  48.     var width = g.width;
  49.     var height = g.height;
  50.     var barLeft = width *.10;
  51.     var barBottom = height * .90;
  52.  
  53.     draw();
  54.  
  55.     ctx.strokeStyle = textColor;
  56.     ctx.lineWidth = 2;
  57.     ctx.beginPath();
  58.     drawGraph();
  59.     ctx.stroke();
  60.  
  61.     function drawLine(pt1, pt2) {
  62.         ctx.moveTo(pt1.X, pt1.Y);
  63.         ctx.lineTo(pt2.X, pt2.Y);
  64.     }
  65.  
  66.     function drawGraph() {
  67.         $('#header').text('Normal Distribution of ' + size.toString() + ' values');
  68.         ctx.font = labelFontSize.toString() + "px " + fontFamily;
  69.         var data = "Data";
  70.         ctx.fillText(data, width >> 1, height - labelFontSize.toString());
  71.  
  72.         //rotate ctx to draw text vertically then restore back to norm
  73.         var freq = "Frequency";
  74.         ctx.save();
  75.         ctx.rotate(-Math.PI / 2);
  76.         ctx.textAlign = "center";
  77.         ctx.fillText(freq, -1 * (height >> 1), barLeft >> 2);
  78.         ctx.restore();
  79.  
  80.         //draw horizontal bar   
  81.         var pt1 = new Point(barLeft, barBottom);
  82.         var pt2 = new Point(width, barBottom);
  83.         drawLine(pt1, pt2);
  84.  
  85.         //draw vertical bar
  86.         var pt3 = new Point(barLeft, 0);
  87.         var pt4 = new Point(barLeft, barBottom);
  88.         drawLine(pt3, pt4);
  89.  
  90.         var startValue = 0;
  91.         var partitions = density.length;  //(Math.ceil((dmax - dmin) / barBottom));
  92.         var increment = Math.ceil((dmax - dmin) / partitions);
  93.  
  94.         ctx.font = dataFontSize.toString() + "px " + fontFamily;
  95.         ctx.fillStyle = textColor;
  96.         //Draw vertical markers
  97.         for (var i = startValue + increment; i <= dmax; i = i + increment) {
  98.             var iString = i.toString(); //.substr(0, sigFig);
  99.             var marker = barBottom * ((dmax - i) / dmax);
  100.             ctx.fillRect(barLeft - 5, marker, 10, 3); //draw bar
  101.             ctx.fillText(iString, barLeft - ctx.measureText(iString).width - 10, marker + (labelFontSize>>1)); //draw text
  102.         }
  103.     }
  104.  
  105.     function draw() {
  106.         randomize();
  107.         sort();
  108.  
  109.         dmax = dmax +  Math.ceil((dmax - dmin) / density.length);//give some head space at top of chart
  110.  
  111.         var xPartitions = ((width - barLeft) / density.length);
  112.         var colorSequence = 0;
  113.         var barHeight;
  114.         var x = barLeft;
  115.         var y = barBottom;
  116.  
  117.         for (var i = 0; i < density.length; i++) {
  118.             barHeight = barBottom - (barBottom * ((dmax - density[i])/dmax));
  119.             y = barBottom - barHeight;
  120.  
  121.             //bar
  122.             ctx.lineWidth = 1;
  123.             ctx.fillStyle = colors[colorSequence];
  124.             ctx.fillRect(x, y, barLeft, barHeight);
  125.  
  126.             //value text
  127.             ctx.font = dataFontSize.toString() + "px " + fontFamily;
  128.             ctx.fillStyle = notchColor;
  129.             ctx.fillText(density[i].toString(), (x + x + xPartitions) >> 1, barBottom - barHeight);
  130.  
  131.             //notches
  132.             ctx.fillStyle = notchColor;
  133.             ctx.fillRect((x + x + xPartitions) >> 1, barBottom, 3, 10);
  134.  
  135.             //x-axis label
  136.             ctx.font = dataFontSize.toString() + "px " + fontFamily;
  137.             ctx.fillText(i.toString(), (x + x + xPartitions) >> 1, barBottom + 30);
  138.  
  139.             x = x + xPartitions;
  140.  
  141.             //color cycle
  142.             if (colorSequence + 1 == colors.length) {colorSequence = 0;}else{colorSequence++;}
  143.         }
  144.     }
  145.  
  146.     function randomize() {
  147.         var x1, x2, w, y1, y2;
  148.         var count = size * .5;
  149.  
  150.         for (var i = 0; i < count; i++) {
  151.             do {
  152.                 x1 = 2 * Math.random() - 1;
  153.                 x2 = 2 * Math.random() - 1;
  154.                 w = x1 * x1 + x2 * x2;
  155.             } while (w >= 1);
  156.  
  157.             w = Math.sqrt((-2 * Math.log(w)) / w);
  158.             y1 = x1 * w;
  159.             y2 = x2 * w;
  160.  
  161.             //This technique generates two numbers at a time, might as well use both
  162.             normalValues[i * 2] = y1;
  163.             normalValues[(i * 2) + 1] = y2;
  164.         }
  165.     }
  166.  
  167.     function sort() {
  168.         var multiplier;
  169.         var blocks = 100;
  170.  
  171.         //find min/max values
  172.         min = normalValues[0];
  173.         max = normalValues[0];
  174.  
  175.         for(var i = 1; i <  normalValues.length; i++){
  176.             if(normalValues[i] < min)
  177.                 min = normalValues[i];
  178.  
  179.             if(normalValues[i] > max)
  180.                 max = normalValues[i];
  181.         }
  182.  
  183.         //create buckets
  184.         var buckets = (Math.round(max) - Math.round(min)) + 1;
  185.         for (var i = 0;  i <= buckets; i++) {
  186.             density[i] = 0;
  187.         }
  188.  
  189.         //sort into buckets
  190.         for (var i = 0; i < normalValues.length; i++){
  191.             //get value
  192.             var val = Math.round(normalValues[i]);
  193.             //find where in bucket it would be placed
  194.             var k = 0;
  195.             
  196.             for(var j = Math.round(min); j <= Math.round(max); j++){
  197.                 if( j == val){
  198.                     density[k] = density[k] + 1;
  199.                     if(dmin > density[k])
  200.                         dmin = density[k];
  201.                     if(dmax < density[k])
  202.                         dmax = density[k];
  203.                     dcount++;
  204.                     break;
  205.                 }
  206.                 k++;
  207.             }
  208.         }  
  209.     }
  210. </script>
  211.  
  212.  
  213. </body>
  214. </html>

No comments: