FAQ/How-Do-I-Customize-A-Visualization.md
... ...
@@ -93,4 +93,91 @@ The created object will have several privileged methods, which gives the possibi
93 93
94 94
* collectMonthlyData - will collect data from the report with three fields: category (GROUP), date (Group (Year & Month)) and one integer value.
95 95
96
-* collectGraph - will create oriented graph where first two report fields are used as nodes and the other integer fields determined as metrics.
... ...
\ No newline at end of file
0
+* collectGraph - will create oriented graph where first two report fields are used as nodes and the other integer fields determined as metrics.
1
+
2
+##Modifying Existing Visualizations
3
+
4
+###Aligning Sunburst to Grid
5
+
6
+In Sunburst's View.html, change this:
7
+
8
+```jscript
9
+var g1 = d3.select("#VIS_ID")
10
+ .append("svg:svg")
11
+ .attr("width", width)
12
+ .attr("height", heightWithOffset);
13
+var g = g1.append("svg:g")
14
+ .attr("class", "container")
15
+ .attr("transform", "translate(" + width / 2 + "," + heightWithOffset / 2 + ")");
16
+g1.append("svg:circle")
17
+ .attr("r", radius * 0.47)
18
+ .attr("transform", "translate(" + width / 2 + "," + heightWithOffset / 2 + ")")
19
+ .style("fill", "#ffffff");
20
+var g2 = g1.append("svg:g");
21
+var explanation = g2.append("svg:text")
22
+ .attr("x", "0")
23
+ .attr("y", "0")
24
+ .attr("style", "fill: #666; color: #666; font-size: 2.5em; align: center; pointer-events: none");
25
+var percentage = explanation.append("tspan")
26
+ .attr("x", "0")
27
+ .attr("dy", "0")
28
+ .attr("text-anchor", "middle")
29
+ .attr("style", "fill: #666; color: #666; font-size: 30px; align: center; font-family: 'Open Sans', sans-serif;")
30
+ .text("100%");
31
+explanation.append("tspan")
32
+ .attr("x", "0")
33
+ .attr("dy", "2.5em")
34
+ .attr("text-anchor", "middle")
35
+ .attr("style", "fill: #666; color: #666; font-size: 12px; align: center; font-family: 'Open Sans', sans-serif;")
36
+ .text(expText);
37
+
38
+var tw = g2.node().getBBox().width, th = g2.node().getBBox().height,
39
+ actualRadius = Math.sqrt((tw * tw + th * th) / 4),
40
+ textScaleFactor = (actualRadius > 0) ? (radius * 0.3 / actualRadius) : 1;
41
+g2.attr("transform", "translate(" + width / 2 + "," + heightWithOffset / 2 + ") scale(" + textScaleFactor + ")");
42
+
43
+```
44
+
45
+To this:
46
+
47
+```jscript
48
+ar left = heightWithOffset * 0.5;
49
+var center = width * 0.5;
50
+var rigth = width - heightWithOffset * 0.5;
51
+
52
+var align = center;
53
+
54
+var g1 = d3.select("#VIS_ID")
55
+ .append("svg:svg")
56
+ .attr("width", width)
57
+ .attr("height", heightWithOffset);
58
+var g = g1.append("svg:g")
59
+ .attr("class", "container")
60
+ .attr("transform", "translate(" + align + "," + heightWithOffset / 2 + ")");
61
+g1.append("svg:circle")
62
+ .attr("r", radius * 0.47)
63
+ .attr("transform", "translate(" + align + "," + heightWithOffset / 2 + ")")
64
+ .style("fill", "#ffffff");
65
+var g2 = g1.append("svg:g");
66
+var explanation = g2.append("svg:text")
67
+ .attr("x", "0")
68
+ .attr("y", "0")
69
+ .attr("style", "fill: #666; color: #666; font-size: 2.5em; align: center; pointer-events: none");
70
+var percentage = explanation.append("tspan")
71
+ .attr("x", "0")
72
+ .attr("dy", "0")
73
+ .attr("text-anchor", "middle")
74
+ .attr("style", "fill: #666; color: #666; font-size: 30px; align: center; font-family: 'Open Sans', sans-serif;")
75
+ .text("100%");
76
+explanation.append("tspan")
77
+ .attr("x", "0")
78
+ .attr("dy", "2.5em")
79
+ .attr("text-anchor", "middle")
80
+ .attr("style", "fill: #666; color: #666; font-size: 12px; align: center; font-family: 'Open Sans', sans-serif;")
81
+ .text(expText);
82
+
83
+var tw = g2.node().getBBox().width, th = g2.node().getBBox().height,
84
+ actualRadius = Math.sqrt((tw * tw + th * th) / 4),
85
+ textScaleFactor = (actualRadius > 0) ? (radius * 0.3 / actualRadius) : 1;
86
+g2.attr("transform", "translate(" + align + "," + heightWithOffset / 2 + ") scale(" + textScaleFactor + ")");
87
+```
... ...
\ No newline at end of file