48 yscale = (streamheight - 2 * VMARGIN) / maxcol, |
48 yscale = (streamheight - 2 * VMARGIN) / maxcol, |
49 centery = streamheight / 2, |
49 centery = streamheight / 2, |
50 xscale = width / (transp.length - 1), |
50 xscale = width / (transp.length - 1), |
51 txscale = width / (ENDTIME - STARTTIME), |
51 txscale = width / (ENDTIME - STARTTIME), |
52 coords = _(data).map(function(line, lineindex) { |
52 coords = _(data).map(function(line, lineindex) { |
53 return _(line).map(function(point, colindex) { |
53 return { |
54 var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0, |
54 points : _(line).map(function(point, colindex) { |
55 uppercumul = cumulative[colindex][lineindex]; |
55 var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0, |
56 return { |
56 uppercumul = cumulative[colindex][lineindex]; |
57 data: point, |
57 return { |
58 x: xscale * colindex, |
58 data: point, |
59 lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ), |
59 x: xscale * colindex, |
60 uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ), |
60 lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ), |
61 } |
61 uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ), |
62 }); |
62 } |
|
63 }) |
|
64 } |
63 }), |
65 }), |
64 paths = _(coords).map(function(line) { |
66 _(coords).each(function(line) { |
65 var lowerline = _(line).reduce(function(path, point, colindex) { |
67 var lowerline = _(line.points).reduce(function(path, point, colindex) { |
66 var res = path; |
68 var res = path; |
67 if (colindex) { |
69 if (colindex) { |
68 res += "," + (point.x - CURVE * xscale) + "," + point.lowery + "," + point.x + "," + point.lowery; |
70 res += "," + (point.x - CURVE * xscale) + "," + point.lowery + "," + point.x + "," + point.lowery; |
69 } else { |
71 } else { |
70 res += "M" + point.x + "," + point.lowery; |
72 res += "M" + point.x + "," + point.lowery; |
71 } |
73 } |
72 if (colindex < line.length - 1) { |
74 if (colindex < line.points.length - 1) { |
73 res += "C" + (point.x + CURVE * xscale) + "," + point.lowery; |
75 res += "C" + (point.x + CURVE * xscale) + "," + point.lowery; |
74 } |
76 } |
75 return res; |
77 return res; |
76 }, ""); |
78 }, ""); |
77 var upperline = _(line).reduceRight(function(path, point, colindex) { |
79 var upperline = _(line.points).reduceRight(function(path, point, colindex) { |
78 var res = path; |
80 var res = path; |
79 if (colindex < line.length - 1) { |
81 if (colindex < line.points.length - 1) { |
80 res += "," + (point.x + CURVE * xscale) + "," + point.uppery + "," + point.x + "," + point.uppery; |
82 res += "," + (point.x + CURVE * xscale) + "," + point.uppery + "," + point.x + "," + point.uppery; |
81 } else { |
83 } else { |
82 res += "L" + point.x + "," + point.uppery; |
84 res += "L" + point.x + "," + point.uppery; |
83 } |
85 } |
84 if (colindex) { |
86 if (colindex) { |
85 res += "C" + (point.x - CURVE * xscale) + "," + point.uppery; |
87 res += "C" + (point.x - CURVE * xscale) + "," + point.uppery; |
86 } |
88 } |
87 return res; |
89 return res; |
88 }, ""); |
90 }, ""); |
89 return lowerline + upperline; |
91 line.path = lowerline + upperline; |
90 }); |
92 }); |
91 |
93 |
92 /* Drawing streamgraph*/ |
94 /* Drawing streamgraph*/ |
93 |
95 |
94 var paper = new Raphael($selector[0]); |
96 var paper = new Raphael($selector[0]); |
95 |
97 |
96 _(paths).each(function(path, index) { |
98 _(coords).each(function(line, index) { |
97 var color = COLORS[index % COLORS.length], |
99 line.color = COLORS[index % COLORS.length]; |
98 p = paper.path(path); |
100 line.surface = paper.path(line.path); |
99 p.attr({ |
101 line.surface.attr({ |
100 stroke: "none", |
102 stroke: "none", |
101 fill: color |
103 fill: line.color |
102 }); |
104 }); |
103 }); |
105 }); |
104 |
106 |
105 /* Drawing years */ |
107 /* Drawing years */ |
106 |
108 |