styles with scss
[tech-radar.git] / src / graphing / radar.js
1 tr.graphing.Radar = function (size, radar) {
2 var self, fib, svg;
3
4 fib = new tr.util.Fib();
5
6 self = {};
7 self.svg = function () {
8 return svg;
9 }
10
11 function center () {
12 return Math.round(size/2);
13 }
14
15 function plotLines() {
16 svg.append('line')
17 .attr('x1', center())
18 .attr('y1', 0)
19 .attr('x2', center())
20 .attr('y2', size)
21 .attr('stroke-width', 14);
22
23 svg.append('line')
24 .attr('x1', 0)
25 .attr('y1', center())
26 .attr('x2', size)
27 .attr('y2', center())
28 .attr('stroke-width', 14);
29 };
30
31 function getRadius(cycles, i) {
32 var sequence = fib.sequence(cycles.length);
33 var total = fib.sum(cycles.length);
34 var sum = fib.sum(i);
35
36 return center() - (center() * sum / total);
37 }
38
39 function plotCircles(cycles) {
40 var increment;
41
42 cycles.forEach(function (cycle, i) {
43 svg.append('circle')
44 .attr('cx', center())
45 .attr('cy', center())
46 .attr('r', getRadius(cycles, i));
47 });
48 }
49
50 function plotTexts(cycles) {
51 var increment;
52
53 increment = Math.round(center() / cycles.length);
54
55 cycles.forEach(function (cycle, i) {
56 svg.append('text')
57 .attr('class', 'line-text')
58 .attr('y', center() + 4)
59 .attr('x', center() - getRadius(cycles, i) + 10)
60 .text(cycle.name());
61
62 svg.append('text')
63 .attr('class', 'line-text')
64 .attr('y', center() + 4)
65 .attr('x', center() + getRadius(cycles, i) - 10)
66 .attr('text-anchor', 'end')
67 .text(cycle.name());
68 });
69 };
70
71 function triangle(x, y, cssClass) {
72 var tsize, top, left, right, bottom, points;
73
74 tsize = 13
75 top = y - tsize;
76 left = (x - tsize + 1);
77 right = (x + tsize + 1);
78 bottom = (y + tsize - tsize / 2.5);
79
80 points = x + 1 + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
81
82 return svg.append('polygon')
83 .attr('points', points)
84 .attr('class', cssClass)
85 .attr('stroke-width', 1.5);
86 }
87
88 function circle(x, y, cssClass) {
89 svg.append('circle')
90 .attr('cx', x)
91 .attr('cy', y)
92 .attr('class', cssClass)
93 .attr('stroke-width', 1.5)
94 .attr('r', 10);
95 }
96
97 function plotBlips(cycles, quadrant, adjustX, adjustY) {
98 var blips;
99 blips = quadrant.blips();
100 cycles.forEach(function (cycle, i) {
101 var maxRadius, minRadius, cycleBlips;
102
103 maxRadius = getRadius(cycles, i);
104 minRadius = (i == cycles.length - 1) ? 0: getRadius(cycles, i + 1);
105
106 var cycleBlips = blips.filter(function (blip) {
107 return blip.cycle() == cycle;
108 });
109
110 cycleBlips.forEach(function (blip) {
111 var angleInRad, radius;
112
113 var split = blip.name().split('');
114 var sum = split.reduce(function (p, c) { return p + c.charCodeAt(0); }, 0);
115 chance = new Chance(sum * cycle.name().length * blip.number());
116
117 angleInRad = Math.PI * chance.integer({ min: 13, max: 85 }) / 180;
118 radius = chance.floating({ min: minRadius + 25, max: maxRadius - 10 });
119
120 var x = center() + radius * Math.cos(angleInRad) * adjustX;
121 var y = center() + radius * Math.sin(angleInRad) * adjustY;
122
123 if (blip.isNew()) {
124 triangle(x, y, cssClassFor(quadrant.name()));
125 } else {
126 circle(x, y, cssClassFor(quadrant.name()));
127 }
128
129 svg.append('text')
130 .attr('x', x)
131 .attr('y', y + 4)
132 .attr('class', 'blip-text')
133 .attr('text-anchor', 'middle')
134 .text(blip.number())
135 });
136 });
137 };
138
139 function cssClassFor(string) {
140 return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-');
141 }
142
143 function plotQuadrantNames(quadrants) {
144 function plotName(name, anchor, x, y) {
145 svg.append('text')
146 .attr('x', x)
147 .attr('y', y)
148 .attr('class', cssClassFor(name))
149 .attr('text-anchor', anchor)
150 .text(name);
151 }
152
153 plotName(quadrants.I.name(), 'end', size - 10, 10)
154 plotName(quadrants.II.name(), 'start', 10, 10)
155 plotName(quadrants.III.name(), 'start', 10, size - 10)
156 plotName(quadrants.IV.name(), 'end', size -10, size - 10)
157 }
158
159 self.init = function (selector) {
160 svg = d3.select(selector || 'body').append("svg");
161 return self;
162 };
163
164 self.plot = function () {
165 var cycles, quadrants;
166
167 cycles = radar.cycles().reverse();
168 quadrants = radar.quadrants();
169
170 svg.attr('width', size).attr('height', size);
171
172 plotCircles(cycles);
173 plotLines();
174 plotTexts(cycles);
175
176 if (radar.hasQuadrants()) {
177 plotQuadrantNames(quadrants);
178 plotBlips(cycles, quadrants.I, 1, -1);
179 plotBlips(cycles, quadrants.II, -1, -1);
180 plotBlips(cycles, quadrants.III, -1, 1);
181 plotBlips(cycles, quadrants.IV, 1, 1);
182 }
183 };
184
185 return self;
186 };