diff --git a/index.html b/index.html
index 809ac775489187cca336c7cccc043b33752622f2..459bc28857d48eaa7e7c2497426548b96a1950f9 100644
--- a/index.html
+++ b/index.html
@@ -128,9 +128,9 @@ cpietsch@gmail.com
 			</div>
 		</div>
 
-		<div class="navi hide">
-			<div class="time button active" data="time">time</div>
-			<div class="tsne button" data="tsne">similarity</div>
+		<div class="navi">
+			<div class="time button active" data="time">Gruppiert</div>
+			<div class="tsne button" data="tsne">Ähnlichkeit</div>
 		</div>
 
 		<div class="infobar sneak">
diff --git a/js/canvas.js b/js/canvas.js
index 3545633b4a8f3b7d12a4110efbb67efa4c91bc84..5fffa2b1552c2c71088f48121768e96aaac3709a 100644
--- a/js/canvas.js
+++ b/js/canvas.js
@@ -261,6 +261,12 @@ function Canvas() {
             d.clusterSprite = sprite2
             stage3_cluster.addChild(sprite2);
 
+            // console.log(d.tsne)
+            var color = d.tsne[3]
+            var intcolor =  parseInt(color.substring(1), 16)
+            // console.log(color, intcolor)
+            d.clusterSprite.tint = intcolor
+
         })
 
 
@@ -736,11 +742,9 @@ function Canvas() {
         active.forEach(function (d) {
 
             var factor = height / 2;
-            var tsneEntry = tsneIndex[d.id]
-            if(tsneEntry) {
-                d.x = (tsneEntry[0] * dimension) + width / 2 - dimension / 2 + margin.left;
-                d.y = (tsneEntry[1] * dimension) - dimension / 2 + marginBottom;
-            }
+            d.x = (d.tsne[0] * dimension) + width / 2 - dimension / 2 + margin.left;
+            d.y = (d.tsne[1] * dimension) - dimension / 2 + marginBottom;
+       
             // var tsneEntry = tsne.find(function (t) {
             //     return t.id == d.id
             // })
diff --git a/js/utils.js b/js/utils.js
index 2e4d094eea25d65a3ad77db55fa46a56deb9ab97..976f86b8652f2353278cbe280f0efe396921ceb1 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -138,10 +138,45 @@ utils.clean = function(data) {
 		d.x = i;
 		d.y = i;
 		d.order = i;
+		d.tsne = JSON.parse(d.tsne)
 	});
 
+	utils.initTsne(data)
+
 }
 
+utils.initTsne = function(clean){
+	var xExtent = d3.extent(clean, function (d) {
+		return d.tsne[0]
+	})
+	var yExtent = d3.extent(clean, function (d) {
+		return d.tsne[1]
+	})
+
+	var x = d3.scale.linear().range([0, 1]).domain(xExtent)
+	var y = d3.scale.linear().range([0, 1]).domain(yExtent)
+
+	var colorScale = d3.scale.category10()
+
+	clean.forEach(function (d) {
+		d.tsne = [
+			x(d.tsne[0]),
+			y(d.tsne[1]),
+			d.tsne[2],
+			colorScale(d.tsne[2])
+		]
+	})
+
+	// data.forEach(function(d){
+	// 	var tsne = tsneIndex[d.id]
+	// 	var color = tsne[3] || "#FFFFFF"
+	// 	var intcolor =  parseInt(color.substring(1), 16)
+	// 	// console.log(color, intcolor)
+	// 	d.clusterSprite.tint = intcolor
+	// })
+}
+
+
 utils.simulateLargeDatasets = function(data){
 	Array.prototype.push.apply(data, _.clone(data, true))
 	Array.prototype.push.apply(data, _.clone(data, true))
diff --git a/js/viz.js b/js/viz.js
index 137d7fe2a1aee49c5b147f2ecebb28da334c9eb1..b6082ff1ee6a0d234199885b1fea2bf7d5b6d1dc 100644
--- a/js/viz.js
+++ b/js/viz.js
@@ -65,13 +65,13 @@ function init() {
 				search.init();
 				canvas.init(data, timeline, config);
 
-				if (config.loader.tsne) {
-					d3.csv(config.loader.tsne, function (tsne) {
-						console.log(tsne)
-						d3.select(".navi").classed("hide", false)
-						canvas.addTsneData(tsne)
-					})
-				}
+				// if (config.loader.tsne) {
+				// 	d3.csv(config.loader.tsne, function (tsne) {
+				// 		console.log(tsne)
+				// 		d3.select(".navi").classed("hide", false)
+				// 		canvas.addTsneData(tsne)
+				// 	})
+				// }
 
 				LoaderSprites()
 					.progress(function (textures) {