src/graphing/radar.js

   1 tr.graphing.Radar = function (svg, size, radar) {
   2   var self, fib;
   3   self = {};
   4   fib = new tr.util.Fib();
   5
   6   svg.attr('width', size).attr('height', size);
   7
   8   function center () {
   9     return Math.round(size/2);
  10   }
  11
  12   function plotLines() {
  13     svg.append('line')
  14       .attr('x1', center())
  15       .attr('y1', 0)
  16       .attr('x2', center())
  17       .attr('y2', size)
  18       .attr('stroke-width', 14);
  19
  20     svg.append('line')
  21       .attr('x1', 0)
  22       .attr('y1', center())
  23       .attr('x2', size)
  24       .attr('y2', center())
  25       .attr('stroke-width', 14);
  26   };
  27
  28   function getRadius(cycles, i) {
  29     var sequence = fib.sequence(cycles.length);
  30     var total = fib.sum(cycles.length);
  31     var sum = fib.sum(i);
  32
  33     return center() - (center() * sum / total);
  34   }
  35
  36   function plotCircles(cycles) {
  37     var increment;
  38
  39     cycles.forEach(function (cycle, i) {
  40       svg.append('circle')
  41         .attr('cx', center())
  42         .attr('cy', center())
  43         .attr('r', getRadius(cycles, i));
  44     });
  45   }
  46
  47   function plotTexts(cycles) {
  48     var increment;
  49
  50     increment = Math.round(center() / cycles.length);
  51
  52     cycles.forEach(function (cycle, i) {
  53       svg.append('text')
  54         .attr('class', 'line-text')
  55         .attr('y', center() + 4)
  56         .attr('x', center() - getRadius(cycles, i) + 10)
  57         .text(cycle.name());
  58
  59       svg.append('text')
  60         .attr('class', 'line-text')
  61         .attr('y', center() + 4)
  62         .attr('x', center() + getRadius(cycles, i) - 10)
  63         .attr('text-anchor', 'end')
  64         .text(cycle.name());
  65     });
  66   };
  67
  68   function triangle(x, y, cssClass) {
  69     return svg.append('path')
  70       .attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406')
  71       .attr('transform', 'translate(' + ((-421 * .73) + x) + ',' + ((-299 * 0.73) + y) + ') scale(0.73) ')
  72       .attr('class', cssClass)
  73       .attr('stroke-width', 2);
  74
  75     var tsize = 7
  76
  77     var top = y - tsize + 2;
  78     var left = (x - tsize);
  79     var right = (x + tsize);
  80     var bottom = (y + tsize);
  81
  82     var points = x + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
  83   }
  84
  85   function circle(x, y, cssClass) {
  86     svg.append('circle')
  87       .attr('cx', x)
  88       .attr('cy', y)
  89       .attr('class', cssClass)
  90       .attr('stroke-width', 1.5)
  91       .attr('r', 10);
  92   }
  93
  94   function plotBlips(cycles, quadrant, adjustX, adjustY) {
  95     var blips, number;
  96     blips = quadrant.blips();
  97     number = 0;
  98     cycles.forEach(function (cycle, i) {
  99       var maxRadius, minRadius, cycleBlips;
 100
 101       maxRadius = getRadius(cycles, i);
 102       minRadius = (i == cycles.length - 1) ? 0: getRadius(cycles, i + 1);
 103
 104       var cycleBlips = blips.filter(function (blip) {
 105         return blip.cycle() == cycle;
 106       });
 107
 108       cycleBlips.forEach(function (blip) {
 109         var angleInRad, radius;
 110
 111         var split = blip.name().split('');
 112         var sum = split.reduce(function (p, c) { return p + c.charCodeAt(0); }, 0);
 113         chance = new Chance(sum * cycle.name().length * number);
 114
 115         angleInRad = Math.PI * chance.integer({ min: 13, max: 85 }) / 180;
 116         radius = chance.floating({ min: minRadius + 25, max: maxRadius - 10 });
 117
 118         var x = center() + radius * Math.cos(angleInRad) * adjustX;
 119         var y = center() + radius * Math.sin(angleInRad) * adjustY;
 120
 121         if (blip.isNew()) {
 122           triangle(x, y, cssClassFor(quadrant.name()));
 123         } else {
 124           circle(x, y, cssClassFor(quadrant.name()));
 125         }
 126
 127         svg.append('text')
 128           .attr('x', x)
 129           .attr('y', y + 4)
 130           .attr('class', 'blip-text')
 131           .attr('text-anchor', 'middle')
 132           .text(++number)
 133       });
 134     });
 135   };
 136
 137   function cssClassFor(string) {
 138     return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-');
 139   }
 140
 141   function plotQuadrantNames(quadrants) {
 142     function plotName(name, anchor, x, y) {
 143       svg.append('text')
 144         .attr('x', x)
 145         .attr('y', y)
 146         .attr('class', cssClassFor(name))
 147         .attr('text-anchor', anchor)
 148         .text(name);
 149     }
 150
 151     plotName(quadrants.I.name(), 'end', size - 10, 10)
 152     plotName(quadrants.II.name(), 'start', 10, 10)
 153     plotName(quadrants.III.name(), 'start', 10, size - 10)
 154     plotName(quadrants.IV.name(), 'end', size -10, size - 10)
 155   }
 156
 157   self.plot = function () {
 158     var cycles, quadrants;
 159     cycles = radar.cycles().reverse();
 160     quadrants = radar.quadrants();
 161
 162     plotCircles(cycles);
 163     plotLines();
 164     plotTexts(cycles);
 165
 166     if (radar.hasQuadrants()) {
 167       plotQuadrantNames(quadrants);
 168       plotBlips(cycles, quadrants.I, 1, -1);
 169       plotBlips(cycles, quadrants.II, -1, -1);
 170       plotBlips(cycles, quadrants.III, -1, 1);
 171       plotBlips(cycles, quadrants.IV, 1, 1);
 172     }
 173   };
 174
 175   return self;
 176 };