plot.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html>
   3 <head>
   4     <title>Plot</title>
   5
   6     <script type="text/javascript" src="script/util.js"></script>
   7
   8     <script type="text/javascript" src="script/canvas.js"></script>
   9
  10     <link rel="stylesheet" type="text/css" href="style/common.css" />
  11 </head>
  12 <body>
  13     <div id="target">
  14     </div>
  15
  16     <script type="text/javascript">
  17         var w = 800;
  18         var h = 500;
  19
  20         var canvas = document.createElement('canvas');
  21         canvas.setAttribute('width', w + 'px');
  22         canvas.setAttribute('height', h + 'px');
  23         var ctx = canvas.getContext('2d');
  24         document.getElementById('target').appendChild(canvas);
  25
  26         ctx.strokeStyle = 'red';
  27
  28
  29         var data1 = [[0, 0], [1, 10], [2, 3], [3, 12], [4, 0], [5, 7]];
  30         var data2 = [[0, 9], [1, 0], [2, 13], [3, 2], [4, 12], [5, 3]];
  31         var data3 = [[0, 1], [1, 2], [2, 4], [3, 8], [4, 16], [5, 13]];
  32
  33         function mkreduce(fn) {
  34             return function(max, current) {
  35                 return [fn(max[0], current[0]), fn(max[1], current[1])];
  36             }
  37         }
  38
  39         var getmax = mkreduce(Math.max);
  40         var getmin = mkreduce(Math.min);
  41
  42         var max = data3.reduce(getmax, data2.reduce(getmax, data1.reduce(getmax)));
  43         var min = data3.reduce(getmin, data2.reduce(getmin, data1.reduce(getmin)));
  44
  45         var dx = max[0] - min[0];
  46         var dy = max[1] - min[1];
  47
  48         var mar = .1;
  49
  50         var scalex = w / ((1 + 2 * mar) * dx);
  51         var scaley = h / ((1 + 2 * mar) * dy);
  52
  53         origin = [(w - dx * scalex) / 2, (h + dy * scaley) / 2];
  54
  55         function drawline(start, end, i) {
  56             if (i <= 1)
  57                 ctx.fillCircle(origin[0] + start[0] * scalex, origin[1] - start[1] * scaley, 4)
  58             ctx.fillCircle(origin[0] + end[0] * scalex, origin[1] - end[1] * scaley, 4)
  59
  60             ctx.beginPath();
  61             ctx.moveTo(origin[0] + start[0] * scalex, origin[1] - start[1] * scaley);
  62             ctx.lineTo(origin[0] + end[0] * scalex, origin[1] - end[1] * scaley);
  63             ctx.stroke();
  64
  65             return end;
  66         }
  67
  68         function draw() {
  69             ctx.strokeStyle = '#0047AB';
  70             ctx.fillStyle = '#0047AB';
  71             data1.reduce(drawline);
  72             ctx.strokeStyle = '#d00000';
  73             ctx.fillStyle = '#d00000';
  74             data2.reduce(drawline);
  75             ctx.strokeStyle = '#20899f';
  76             ctx.fillStyle = '#20899f';
  77             data3.reduce(drawline);
  78         }
  79
  80         ctx.lineWidth = 3;
  81         draw();
  82
  83     </script>
  84
  85 </body>
  86 </html>