Skip to content

Commit

Permalink
Merge pull request #16 from smadha/cartesian
Browse files Browse the repository at this point in the history 
Dashboard for analysing similarity
  • Loading branch information
@chrismattmann
chrismattmann authored Sep 12, 2016
2 parents 7a384ba + e6a7a12 commit 34ff7a3
Show file tree
Hide file tree
Showing 18 changed files with 653 additions and 5 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,5 @@ Temporary Items
/.settings/
/data/
/similarity.txt

*.mp4
Binary file removed src/main/bin/similarity_heatmap.png
View file
Binary file not shown.
17 changes: 14 additions & 3 deletions src/main/java/org/pooledtimeseries/FormatOutput.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.text.DecimalFormat;
import java.util.List;

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

for(String[] resultRow: resultMatrix){
StringBuffer sb = new StringBuffer("");
for(String resultCell: resultRow){
//if resultCell == null print empty string else value
similarity.print( (resultCell == null?"":resultCell) +",");
sb.append((resultCell == null?"":resultCell) +",");
}
similarity.print(sb.substring(0, sb.length()-1));
similarity.println();

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

DecimalFormat df = new DecimalFormat("0.00");

String score = "";
String vid1 = "";
String vid2 = "";
Expand All @@ -118,14 +123,20 @@ private static void fillSimLineInResult(String simLine, String[][] resultMatrix,
{
// scoped under a brace to limit scope of temp variables
String[] pairAndScore = simLine.split("\t");
score = pairAndScore[1];

score = df.format(Double.parseDouble(pairAndScore[1]) );
String[] pair = pairAndScore[0].split(",");
vid1 = pair[0];
vid2 = pair[1];
indexOfvid1 = videoList.indexOf(vid1);
indexOfvid2 = videoList.indexOf(vid2);
}


//if this video is not present in input list of video skip it from matrix
//This is used when we create output for a subset of videos
if(indexOfvid2 == -1 || indexOfvid1 == -1)
return;

//Fill only upper matrix
if (indexOfvid1 < indexOfvid2) {
resultMatrix[indexOfvid1][indexOfvid2]=score;
Expand Down
60 changes: 60 additions & 0 deletions visualization/circlepacking.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
fill: rgb(31, 119, 180);
fill-opacity: .25;
stroke: rgb(31, 119, 180);
stroke-width: 1px;
}

.leaf circle {
fill: #ff7f0e;
fill-opacity: 1;
}

text {
font: 10px sans-serif;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960,
format = d3.format(",d");

var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return 0.5; });

var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(2,2)");

d3.json("data/similarity_cluster.json", function(error, root) {
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(0.5)); });

node.append("circle")
.attr("r", function(d) { return d.r; });

node.filter(function(d) { return !d.children; }).append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.name.substring(0, d.r / 3); });
});

d3.select(self.frameElement).style("height", diameter + "px");

</script>
172 changes: 172 additions & 0 deletions visualization/cluster-d3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Flare Dendrogram</title>
<style>

.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node circle img{

}
.node {
font: 10px sans-serif;
}

.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}

div.tooltip {
position: absolute;
text-align: center;
width: 400px;
height: 400px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
overflow: scroll;
/* pointer-events: none; This line needs to be removed */
}

div.tooltip:before{
content:'';
display:block;
width:0;
height:0;
position:absolute;

border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:30px solid lightsteelblue;
left:-7px;
top:7px;
}

object {
max-height: 80%;
max-width: 80%;
}

p {

height: 40%;
width: 100%;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
clusterJson = d3.json("data/similarity_cluster.json", function(error, root){
var i = 0;
function visit(parent, visitFn, childrenFn) {
if (!parent) return;

visitFn(parent);

var children = childrenFn(parent);
if (children) {
var count = children.length;
for (var i = 0; i < count; i++) {
visit(children[i], visitFn, childrenFn);
}
}
}

visit(root, function(d) {
if(d.children == null)
i++;

}, function(d) {
return d.children && d.children.length > 0 ? d.children : null;
});

var radius = 340+1.4*i;

var cluster = d3.layout.cluster()
.size([360, radius - 120]);


var translateX= radius+200;
var translateY = radius +200;

var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });


var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);


var svg = d3.select("body").append("svg")
.attr("width", radius * 2+400)
.attr("height", radius * 2+400)
.append("g")
.attr("transform", "translate(" + translateX + "," + translateY + ")");

var nodes = cluster.nodes(root);

var link = svg.selectAll("path.link")
.data(cluster.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);

var node = svg.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

node.append("circle")
.attr("id", function(d){ return d.name;})
.attr("class", "node--cluster")
.attr("r", 6)
.on('mouseover',function(d){
div.style("visibility", "visible");
div.transition().duration(200)
.style("opacity", .9);
div.on('mouseover', function(d){
div.style("visibility", "visible");
div.transition().duration(200)
.style("opacity", .9);
});
div.on('mouseout', function(d){
div.style("visibility", "hidden");
div.transition().style('opacity', 0);
});
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>')
.style("left", (d3.event.pageX) + "px" )
.style("top", (d3.event.pageY) + "px");


})
.on('mouseout', function(d){
div.transition().style('opacity', 0);
div.style("visibility", "hidden");
});


node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.name; });

d3.select(self.frameElement).style("height", radius * 2 + "px");

});
</script>
</body>

36 changes: 36 additions & 0 deletions visualization/css/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
table, th, td {
border: 1px solid black;
padding:3px !important;
}
table {
border-collapse: collapse;
margin:10px;
}
html, body{
height: 100%;
}
.upper-div{
overflow-y:scroll;
overflow-x:scroll;
overflow: -moz-scrollbars-vertical;
}
.lower-div{

}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.break-words {
word-break:break-all
}

.well{
padding: 5px;
margin-bottom: 2px;
}
0 d3/css/style.css → visualization/css/style.css
View file
File renamed without changes.
Loading

0 comments on commit 34ff7a3

Please sign in to comment.