Skip to content

Commit 34ff7a3

Browse files
chrismattmannchrismattmann
authored
Merge pull request #16 from smadha/cartesian
Dashboard for analysing similarity
2 parents 7a384ba + e6a7a12 commit 34ff7a3

18 files changed

+653
-5
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,5 @@ Temporary Items
4848
/.settings/
4949
/data/
5050
/similarity.txt
51+
52+
*.mp4

‎src/main/bin/similarity_heatmap.png‎

-25.4 KB
Binary file not shown.

‎src/main/java/org/pooledtimeseries/FormatOutput.java‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
import java.nio.file.Files;
2727
import java.nio.file.Path;
2828
import java.nio.file.Paths;
29+
import java.text.DecimalFormat;
2930
import java.util.List;
3031

3132
import com.google.common.base.Charsets;
@@ -89,10 +90,12 @@ public static void main(String[] args) throws IOException {
8990
PrintWriter similarity = new PrintWriter(new FileWriter(outFile,true));
9091

9192
for(String[] resultRow: resultMatrix){
93+
StringBuffer sb = new StringBuffer("");
9294
for(String resultCell: resultRow){
9395
//if resultCell == null print empty string else value
94-
similarity.print( (resultCell == null?"":resultCell) +",");
96+
sb.append((resultCell == null?"":resultCell) +",");
9597
}
98+
similarity.print(sb.substring(0, sb.length()-1));
9699
similarity.println();
97100

98101
}
@@ -109,6 +112,8 @@ public static void main(String[] args) throws IOException {
109112
*/
110113
private static void fillSimLineInResult(String simLine, String[][] resultMatrix, List<String> videoList) {
111114

115+
DecimalFormat df = new DecimalFormat("0.00");
116+
112117
String score = "";
113118
String vid1 = "";
114119
String vid2 = "";
@@ -118,14 +123,20 @@ private static void fillSimLineInResult(String simLine, String[][] resultMatrix,
118123
{
119124
// scoped under a brace to limit scope of temp variables
120125
String[] pairAndScore = simLine.split("\t");
121-
score = pairAndScore[1];
126+
127+
score = df.format(Double.parseDouble(pairAndScore[1]) );
122128
String[] pair = pairAndScore[0].split(",");
123129
vid1 = pair[0];
124130
vid2 = pair[1];
125131
indexOfvid1 = videoList.indexOf(vid1);
126132
indexOfvid2 = videoList.indexOf(vid2);
127133
}
128-
134+
135+
//if this video is not present in input list of video skip it from matrix
136+
//This is used when we create output for a subset of videos
137+
if(indexOfvid2 == -1 || indexOfvid1 == -1)
138+
return;
139+
129140
//Fill only upper matrix
130141
if (indexOfvid1 < indexOfvid2) {
131142
resultMatrix[indexOfvid1][indexOfvid2]=score;

‎visualization/circlepacking.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<style>
4+
5+
circle {
6+
fill: rgb(31, 119, 180);
7+
fill-opacity: .25;
8+
stroke: rgb(31, 119, 180);
9+
stroke-width: 1px;
10+
}
11+
12+
.leaf circle {
13+
fill: #ff7f0e;
14+
fill-opacity: 1;
15+
}
16+
17+
text {
18+
font: 10px sans-serif;
19+
}
20+
21+
</style>
22+
<body>
23+
<script src="http://d3js.org/d3.v3.min.js"></script>
24+
<script>
25+
26+
var diameter = 960,
27+
format = d3.format(",d");
28+
29+
var pack = d3.layout.pack()
30+
.size([diameter - 4, diameter - 4])
31+
.value(function(d) { return 0.5; });
32+
33+
var svg = d3.select("body").append("svg")
34+
.attr("width", diameter)
35+
.attr("height", diameter)
36+
.append("g")
37+
.attr("transform", "translate(2,2)");
38+
39+
d3.json("data/similarity_cluster.json", function(error, root) {
40+
var node = svg.datum(root).selectAll(".node")
41+
.data(pack.nodes)
42+
.enter().append("g")
43+
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
44+
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
45+
46+
node.append("title")
47+
.text(function(d) { return d.name + (d.children ? "" : ": " + format(0.5)); });
48+
49+
node.append("circle")
50+
.attr("r", function(d) { return d.r; });
51+
52+
node.filter(function(d) { return !d.children; }).append("text")
53+
.attr("dy", ".3em")
54+
.style("text-anchor", "middle")
55+
.text(function(d) { return d.name.substring(0, d.r / 3); });
56+
});
57+
58+
d3.select(self.frameElement).style("height", diameter + "px");
59+
60+
</script>

‎visualization/cluster-d3.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Flare Dendrogram</title>
4+
<style>
5+
6+
.node circle {
7+
fill: #fff;
8+
stroke: steelblue;
9+
stroke-width: 1.5px;
10+
}
11+
.node circle img{
12+
13+
}
14+
.node {
15+
font: 10px sans-serif;
16+
}
17+
18+
.link {
19+
fill: none;
20+
stroke: #ccc;
21+
stroke-width: 1.5px;
22+
}
23+
24+
div.tooltip {
25+
position: absolute;
26+
text-align: center;
27+
width: 400px;
28+
height: 400px;
29+
padding: 2px;
30+
font: 12px sans-serif;
31+
background: lightsteelblue;
32+
border: 0px;
33+
border-radius: 8px;
34+
overflow: scroll;
35+
/* pointer-events: none; This line needs to be removed */
36+
}
37+
38+
div.tooltip:before{
39+
content:'';
40+
display:block;
41+
width:0;
42+
height:0;
43+
position:absolute;
44+
45+
border-top: 30px solid transparent;
46+
border-bottom: 30px solid transparent;
47+
border-right:30px solid lightsteelblue;
48+
left:-7px;
49+
top:7px;
50+
}
51+
52+
object {
53+
max-height: 80%;
54+
max-width: 80%;
55+
}
56+
57+
p {
58+
59+
height: 40%;
60+
width: 100%;
61+
}
62+
63+
</style>
64+
<body>
65+
<script src="http://d3js.org/d3.v3.min.js"></script>
66+
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
67+
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
68+
<script>
69+
clusterJson = d3.json("data/similarity_cluster.json", function(error, root){
70+
var i = 0;
71+
function visit(parent, visitFn, childrenFn) {
72+
if (!parent) return;
73+
74+
visitFn(parent);
75+
76+
var children = childrenFn(parent);
77+
if (children) {
78+
var count = children.length;
79+
for (var i = 0; i < count; i++) {
80+
visit(children[i], visitFn, childrenFn);
81+
}
82+
}
83+
}
84+
85+
visit(root, function(d) {
86+
if(d.children == null)
87+
i++;
88+
89+
}, function(d) {
90+
return d.children && d.children.length > 0 ? d.children : null;
91+
});
92+
93+
var radius = 340+1.4*i;
94+
95+
var cluster = d3.layout.cluster()
96+
.size([360, radius - 120]);
97+
98+
99+
var translateX= radius+200;
100+
var translateY = radius +200;
101+
102+
var diagonal = d3.svg.diagonal.radial()
103+
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
104+
105+
106+
var div = d3.select("body")
107+
.append("div")
108+
.attr("class", "tooltip")
109+
.style("opacity", 0);
110+
111+
112+
var svg = d3.select("body").append("svg")
113+
.attr("width", radius * 2+400)
114+
.attr("height", radius * 2+400)
115+
.append("g")
116+
.attr("transform", "translate(" + translateX + "," + translateY + ")");
117+
118+
var nodes = cluster.nodes(root);
119+
120+
var link = svg.selectAll("path.link")
121+
.data(cluster.links(nodes))
122+
.enter().append("path")
123+
.attr("class", "link")
124+
.attr("d", diagonal);
125+
126+
var node = svg.selectAll("g.node")
127+
.data(nodes)
128+
.enter().append("g")
129+
.attr("class", "node")
130+
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
131+
132+
node.append("circle")
133+
.attr("id", function(d){ return d.name;})
134+
.attr("class", "node--cluster")
135+
.attr("r", 6)
136+
.on('mouseover',function(d){
137+
div.style("visibility", "visible");
138+
div.transition().duration(200)
139+
.style("opacity", .9);
140+
div.on('mouseover', function(d){
141+
div.style("visibility", "visible");
142+
div.transition().duration(200)
143+
.style("opacity", .9);
144+
});
145+
div.on('mouseout', function(d){
146+
div.style("visibility", "hidden");
147+
div.transition().style('opacity', 0);
148+
});
149+
div .html( d.name.match(/^cluster(\d||\w)+$/)==null && d.name.match(/^group(\d||\w)+$/)==null ? '<h2>' + d.name +'</h2> <object data = "data/ht_video_pot_test_set/'+d.name+'"></object>' : '<h2>this is a cluster node </h2>')
150+
.style("left", (d3.event.pageX) + "px" )
151+
.style("top", (d3.event.pageY) + "px");
152+
153+
154+
})
155+
.on('mouseout', function(d){
156+
div.transition().style('opacity', 0);
157+
div.style("visibility", "hidden");
158+
});
159+
160+
161+
node.append("text")
162+
.attr("dy", ".31em")
163+
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
164+
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
165+
.text(function(d) { return d.name; });
166+
167+
d3.select(self.frameElement).style("height", radius * 2 + "px");
168+
169+
});
170+
</script>
171+
</body>
172+

‎visualization/css/dashboard.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
table, th, td {
2+
border: 1px solid black;
3+
padding:3px !important;
4+
}
5+
table {
6+
border-collapse: collapse;
7+
margin:10px;
8+
}
9+
html, body{
10+
height: 100%;
11+
}
12+
.upper-div{
13+
overflow-y:scroll;
14+
overflow-x:scroll;
15+
overflow: -moz-scrollbars-vertical;
16+
}
17+
.lower-div{
18+
19+
}
20+
::-webkit-scrollbar {
21+
-webkit-appearance: none;
22+
width: 7px;
23+
}
24+
::-webkit-scrollbar-thumb {
25+
border-radius: 4px;
26+
background-color: rgba(0, 0, 0, .5);
27+
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
28+
}
29+
.break-words {
30+
word-break:break-all
31+
}
32+
33+
.well{
34+
padding: 5px;
35+
margin-bottom: 2px;
36+
}

‎d3/css/style.css‎ renamed to ‎visualization/css/style.css‎

File renamed without changes.

0 commit comments

Comments
 (0)