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
|
function trellisChart(anchor, monoGroups) {
/* attr -> {dim, group} key -> str amount, value -> { str, agi, vit, dex, int, luk } */
var attrs = monoGroups.map(function(d) { return d.name; });
var attrsIdByName = {};
monoGroups.forEach(function(d, i) { attrsIdByName[d.name] = i; });
var cellWidth = 5;
var radius = cellWidth / 2;
var subChartLength = 57;
var subChartUnpaddedLength = 50;
var subChartPadding = 7;
var margin = {top: 10, right: 10, bottom: 20, left: 10};
var anchor = d3.select(anchor);
var g = anchor.select("g");
var filler = d3.scale.log().domain([1, 2]).range([0, 255]);
var _chart = function() {
if (g.empty()) {
/* Make stuff! */
var svg = anchor.append("svg");
g = svg
.append("g");
attrs.forEach(function(d, i) {
g
.append("text")
.attr("transform", function(d) { return "translate(0," + ((attrs.length - i) * subChartLength + 10 - subChartLength / 2) + ")"; })
.text(d)
;
g
.append("text")
.attr("transform", function(d) { return "translate(" + (i * subChartLength + 25 + 22) + "," + (attrs.length * subChartLength + 18) + ")"; })
.text(d)
;
})
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)"; })
;
colE
.append("line")
.attr("x1", -cellWidth)
.attr("x2", -cellWidth)
.attr("y1", -cellWidth)
.attr("y2", subChartLength * attrs.length - subChartPadding)
.attr("class", "border-line")
;
colE
.append("line")
.attr("x1", subChartUnpaddedLength)
.attr("x2", subChartUnpaddedLength)
.attr("y1", -cellWidth)
.attr("y2", subChartLength * attrs.length - subChartPadding)
.attr("class", "border-line")
;
/* 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()
;
}
return _chart;
}
|
