-
Notifications
You must be signed in to change notification settings - Fork 0
/
hll_chart.es
164 lines (156 loc) · 5.91 KB
/
hll_chart.es
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
function initGraph(data, raw_width_in, std_error) {
const margin = {top: 30, right: 90, bottom: 50, left: 90},
aspect = Math.sqrt(2),
raw_width = raw_width_in,
raw_height = raw_width / aspect,
width = raw_width - margin.left - margin.right,
height = raw_height - margin.top - margin.bottom;
const x = d3.scale.linear().range([0, width]),
left = d3.scale.linear().range([height, 0]),
right = d3.scale.linear().range([height, 0]);
const xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10).tickFormat(d3.format("s")),
leftAxis = d3.svg.axis().scale(left).orient("left").ticks(20).tickFormat(d3.format("s")),
rightAxis = d3.svg.axis().scale(right).orient("right").ticks(20).tickFormat(d3.format("s"));
const throughput = d3.svg.area()
.x((d) => x(d[0]))
.y0((d) => left(d[3]))
.y1((d) => left(0)),
stderrorarea = d3.svg.area()
.x((d) => x(d[0]))
.y0((d) => right((1 + std_error) * d[2]))
.y1((d) => right((1 - std_error) * d[2]))
.interpolate('monotone'),
valueline = d3.svg.line()
.x((d) => x(d[0]))
.y((d) => right(d[1]))
.interpolate('monotone'),
goldline = d3.svg.line()
.x((d) => x(d[0]))
.y((d) => right(d[2]))
.interpolate('monotone');
d3.selectAll("#chart > svg").remove()
const svg = d3.selectAll("#chart")
.append("svg")
.attr("width", raw_width)
.attr("height", raw_height)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.attr("class", "area throughput")
.attr("d", throughput(data));
svg.append("path")
.attr("class", "line value")
.attr("d", valueline(data));
svg.append("path")
.attr("class", "line gold")
.attr("d", goldline(data));
svg.append("path")
.attr("class", "area stderror")
.attr("d", stderrorarea(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("transform", "translate(" + (width / 2) + " ," + height + ")")
.attr("dy", margin.bottom - 2)
.style("text-anchor", "middle")
.style("font-size", "1.4rem")
.text("# Visits");
svg.append("g")
.attr("class", "y left axis")
.call(leftAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0)
.attr("x", 0 - (height / 2))
.attr("dy", -margin.left * 2/3)
.style("text-anchor", "middle")
.style("font-size", "1.4rem")
.text("Throughput (# Visits / second)");
svg.append("g")
.attr("class", "y right axis")
.attr("transform", "translate(" + width + ",0)")
.call(rightAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", width)
.attr("x", 0 - (height / 2))
.attr("dy", margin.left * 4/5)
.style("text-anchor", "middle")
.style("font-size", "1.4rem")
.text("Cardinality");
svg.append("rect")
.attr("transform", "translate(" + (width - margin.right) + ", " + height + ")")
.attr("x", "-1.4em")
.attr("y", "-4.9em")
.attr("width", "1em")
.attr("height", "1em")
.style("stroke", "none")
.style("stroke", "black")
.style("fill", "steelblue");
svg.append("text")
.attr("transform", "translate(" + width + " ," + height + ")")
.attr("dy", "-4em")
.attr("dx", -margin.right)
.style("text-anchor", "start")
.text("Estimate");
svg.append("rect")
.attr("transform", "translate(" + (width - margin.right) + ", " + height + ")")
.attr("x", "-1.4em")
.attr("y", "-3.4em")
.attr("width", "1em")
.attr("height", "1em")
.style("stroke", "none")
.style("stroke", "black")
.style("fill", "red");
svg.append("text")
.attr("transform", "translate(" + width + " ," + height + ")")
.attr("dy", "-2.5em")
.attr("dx", -margin.right)
.style("text-anchor", "start")
.text("Actual");
svg.append("rect")
.attr("transform", "translate(" + (width - margin.right) + ", " + height + ")")
.attr("x", "-1.4em")
.attr("y", "-1.9em")
.attr("width", "1em")
.attr("height", "1em")
.style("stroke", "black")
.style("fill", "lightgrey");
svg.append("text")
.attr("transform", "translate(" + width + " ," + height + ")")
.attr("dy", "-1em")
.attr("dx", -margin.right)
.style("text-anchor", "start")
.text("Throughput");
return function updateGraph(data) {
if (typeof data == 'undefined' || data.length == 0) return;
x.domain([0, data.slice(-1)[0][0]]);
if (data.slice(-1)[0][2] != 0) {
right.domain([0, (1 + std_error) * data.slice(-1)[0][2]]);
} else {
right.domain([0, 1.02 * data.slice(-1)[0][1]]);
}
left.domain([0, d3.max(data, (d) => d[3])]);
const svg = d3.selectAll("#chart").transition();
svg.select(".x.axis")
.duration(750)
.call(xAxis);
svg.select(".left.axis")
.duration(750)
.call(leftAxis);
svg.select(".right.axis")
.duration(750)
.call(rightAxis);
svg.select(".line.value")
.attr("d", valueline(data));
svg.select(".line.gold")
.attr("d", goldline(data));
svg.select(".area.stderror")
.attr("d", stderrorarea(data));
svg.select(".area.throughput")
.attr("d", throughput(data));
}
}