1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
"use strict";
function trellisChart(anchor, monoGroups) {
/*
* FIXME: There is a lot of hardcoding going on in here.
*/
/* attr -> {dim, group} key -> str amount, value -> { str, agi, vit, dex, int, luk } */
/* Array of all attribute names */
var attrs = monoGroups.map(function(d) { return d.name; });
var attrsIdByName = {};
monoGroups.forEach(function(d, i) { attrsIdByName[d.name] = i; });
/* Parameters. FIXME: Tightly coupled magic numbers everywhere. */
var cellWidth = 5;
var radius = cellWidth / 2;
var subChartLength = 57;
var subChartUnpaddedLength = 50;
var subChartPadding = 7;
var filler = d3.scale.log().domain([1, 2]).range([0, 255]);
var margin = {top: 10, right: 10, bottom: 20, left: 10};
var anchor = d3.select(anchor);
var g = anchor.select("g");
var _chart = function() {
if (g.empty()) {
/* Make stuff! */
var svg = anchor.append("svg").attr("height", 400);
/* Group of dimension labels. */
var dimLabelsG = svg
.append("g")
.attr("transform", "translate(" + (margin.left + 25 + 2) + "," + (margin.top) + ")")
;
var dimLabels;
/* Subchart separators */
var sepOrigin = -cellWidth
, sepLineLen = subChartLength * attrs.length - subChartPadding
;
dimLabels = dimLabelsG.selectAll("g.yAxisDimLabel")
.data(attrs)
;
dimLabels.enter().append("g").attr("class", "yAxisDimLabel")
.attr("transform", function(d, i) { return "translate(0," + (attrs.length - i) * subChartLength + ")"; })
.each(function(d, i) {
var t = d3.select(this);
t
.append("text")
.attr("transform", "translate(-25," + (-subChartUnpaddedLength / 2) + ")")
.text(d)
;
/* Top subchart separators */
t
.append("line")
.attr("x1", sepOrigin)
.attr("x2", sepOrigin + sepLineLen)
.attr("y1", sepOrigin)
.attr("y2", sepOrigin)
.attr("class", "border-line")
;
/* Bottom subchart separators */
t
.append("line")
.attr("x1", sepOrigin)
.attr("x2", sepOrigin + sepLineLen)
.attr("y1", sepOrigin - subChartUnpaddedLength)
.attr("y2", sepOrigin - subChartUnpaddedLength)
.attr("class", "border-line")
;
})
;
dimLabels = dimLabelsG.selectAll("g.xAxisDimLabel")
.data(attrs)
;
dimLabels.enter().append("g").attr("class", "xAxisDimLabel")
.attr("transform", function(d, i) { return "translate(" + (i * subChartLength) + "," + (attrs.length * subChartLength) + ")"; })
.each(function(d, i) {
var t = d3.select(this);
t
.append("text")
.attr("transform", "translate("+ (subChartUnpaddedLength / 2 - 12) + ",8)")
.text(d)
;
/* Left subchart separators */
t
.append("line")
.attr("x1", sepOrigin)
.attr("x2", sepOrigin)
.attr("y1", sepOrigin)
.attr("y2", sepOrigin - sepLineLen)
.attr("class", "border-line")
;
/* Right subchart separators */
t
.append("line")
.attr("x1", sepOrigin + subChartUnpaddedLength)
.attr("x2", sepOrigin + subChartUnpaddedLength)
.attr("y1", sepOrigin)
.attr("y2", sepOrigin - sepLineLen)
.attr("class", "border-line")
;
})
;
/* Group of subcharts. */
g = svg
.append("g")
.attr("transform", "translate(" + (margin.left + 25) + "," + (margin.top) + ")");
}
/* Group first into columns for each stat. We have one column for each of the stat monoGroups. */
/*
* monoGroups is an array of each stat dimension. We can consider each column to have data in the following format:
* { group: function, dim: function, name: stat }
*/
var columns = g.selectAll(".column")
.data(monoGroups);
var colE = columns
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d) { return "translate(" + (attrsIdByName[d.name] * subChartLength) + ",0)"; })
;
/* Each stat has an array for its value. Group these to find the x position. */
/*
* The function transforms the data to take the grouping. We can consider each x position grouping to have data in the following format:
* { key: position, value: [{[stat] -> [y pos] -> count}] }
*/
var colposg = columns.selectAll(".colpos")
.data(function(d, i) {
// console.log("Incoming colposg format:", d, i, "Transformed to:", d.group.all().map(function(d2) { d2.name = d.name; return d2; }));
return d.group.all().map(function(d2) { d2.name = d.name; return d2; });
}, function(d) { return d.key; });
colposg
.enter().append("g")
.attr("class", "colpos")
.attr("transform", function(d) { return "translate(" + (d.key * cellWidth) + ",0)"; })
;
/* Next, split up each x position grouping into its y stat grouping. */
/*
* We can consider each y stat grouping to have data in the following format:
* v[y pos] -> count; v.name -> name
*/
var rows = colposg.selectAll(".row")
.data(function(d, i) {
// console.log("Incoming row format:", d, i, "Transformed to:", attrs.map(function(d2) { return { name: d2, data: d.value[d2] }; }));
return attrs.map(function(d2) { return { name: d2, data: d.value[d2] }; });
});
rows
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d) { return "translate(0," + ((attrs.length - attrsIdByName[d.name] - 1) * subChartLength) + ")"; })
;
/* Finally, split up each y stat grouping into x. */
var vmax = 0;
var cells = rows.selectAll(".cell")
.data(function(d, i) {
// console.log("Incoming cells format:", d, i, "Transformed to:", d.data);
return d.data;
});
cells
.enter().append("circle")
.attr("class", "cell")
.attr("r", radius)
;
cells
.each(function(d) {
if (d > vmax) vmax = d;
})
;
filler.domain([1, vmax + 1]);
cells
.attr("fill", function(d) {
return d ? d3.rgb(255 - filler(d + 1), 255 - filler(d + 1) / 2, 255 - filler(d + 1) / 3) : "white";
})
.attr("transform", function(d, i) { return "translate(0," + ((10-i) * cellWidth) + ")"; })
;
cells
.exit()
.remove()
;
}
_chart.filter = function() {
/*
* TODO:
* This is going to be interesting. As the chart is not charting a single
* monogroup, and most code is built around this assumption, this might
* well end up being a messy special case.
*/
return null;
}
return _chart;
}
|
