-
Notifications
You must be signed in to change notification settings - Fork 1
/
confusionMatrix.js
129 lines (114 loc) · 4.37 KB
/
confusionMatrix.js
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
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 75, left: 75},
width = 700 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg_container = d3.select("#confusionMatrix svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).style("border","0px solid red")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
var myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
var actionList = ["Right Punch","Left Punch","Right Kick","Left Kick","Defend","Golf swing","Swing forehand",
"Swing backhand","Tennis serve", "Throw bowling ball","Aim & shoot","Walk","Run","Jump","Climb","Crouch",
"Steering wheel","Wave","Flap arms","Clap"]
myGroups = [... actionList]
myVars = actionList.reverse()
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg_container.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// axis label rotation
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
// Build Y scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg_container.append("g")
.call(d3.axisLeft(y))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", ".15em")
.attr("dy", "-0.7em")
.attr("transform", "rotate(-45)");;
// Build color scale
var myColor = d3.scaleLinear()
.range(["#e1e6f7", "#0c1869"])
.domain([0,1])
//Read the data
d3.csv("matrix.csv", function(data) {
// create a tooltip
var tooltip = d3.select("#confusionMatrix div")
.style("visibility", 'hidden')
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "5px")
var idGen = d=> d.group.replace(/\s/g, '').replace('&','') +
d.variable.replace(/\s/g, '').replace('&','')
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
tooltip.style("visibility", 'unset')
d3.selectAll('.'+idGen(d)).attr('opacity','1')
}
var mousemove = function(d) {
var x_position = parseFloat(d3.select(this).attr("x"))+90
// console.log(typeof(x_position))
// x_position = 240
tooltip
.html((d.value*100).toFixed(0)+'%')
.style("left", x_position.toFixed(0)+"px")
.style("top", (d3.select(this).attr("y")) + "px")
}
var mouseleave = function(d) {
tooltip.style("visibility", 'hidden')
d3.selectAll('.'+idGen(d)).attr('opacity','0')
}
// add the squares
svg_container.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
svg_container.append("g")
.selectAll('line')
.data(data)
.enter().append('line').attr('stroke','black').attr('stroke-width',"1px")
.attr('x1', 0)
.attr('y1', d=>y(d.variable)+y.bandwidth()/2)
.attr('x2', d=>x(d.group)+x.bandwidth()/2)
.attr('y2', d=>y(d.variable)+y.bandwidth()/2)
.attr('opacity','0')
.attr('class',d=>'dashed '+ idGen(d))
svg_container.append("g")
.selectAll('line')
.data(data)
.enter().append('line').attr('stroke','black').attr('stroke-width',"1px")
.attr('x1', d=>x(d.group)+x.bandwidth()/2)
.attr('y1', height)
.attr('x2', d=>x(d.group)+x.bandwidth()/2)
.attr('y2', d=>y(d.variable)+y.bandwidth()/2)
.attr('opacity','0')
.attr('class',d=>'dashed '+ idGen(d))
})