diff --git a/examples/contour.html b/examples/contour.html
index ab1d883..5894890 100644
--- a/examples/contour.html
+++ b/examples/contour.html
@@ -2,23 +2,24 @@
 <meta charset="utf-8">
 <body>
 <canvas id = "sample" width = "600" height = "600"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script type="text/javascript">
 
-	var grid = [[0,0,1,0,0,0,0,0,0,0,0,0,1,2,0,0],[0,0,0,1,0,2,0,1,1,1,0,0,3,0,1,3],[5,1,1,0,0,0,1,0,2,0,2,0,0,0,3,0],[0,1,2,1,1,2,0,1,0,2,2,3,0,1,1,1],[2,3,2,1,1,7,4,2,4,1,1,0,0,1,0,1],[0,2,2,2,0,1,2,2,3,0,3,0,2,2,1,2],[3,0,1,1,0,1,1,3,1,3,1,1,2,1,1,1],[2,0,4,1,1,1,4,0,1,1,1,1,0,0,7,2],[4,0,1,2,0,2,0,3,3,6,2,0,2,0,2,0],[0,1,0,0,0,0,1,6,0,1,2,0,0,0,0,2],[0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,5,0,3,0,1,1,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1],[0,0,0,0,0,0,0,0,0,1,0,0,1,1,1,0],[0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,4],[0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1]].reverse();
-
+	var tile = {"x":[96,64,160,64,48,192,16,80,112,16,64,176,80,64,32,176,16,144,176,176,112,128,224,16,16,176,16,0,64,160,128,160,208,80,192,0,80,16,192,128,208,160,128,192,32,112,144,112,80,32,80,112,32,80,112,80,32,144,112,144,32,80,32,176,112,208,32,96,192,144,160,144,208,144,0,112,224,160,16,0,208,128,48,0,176,96,96,48,48,64,96,48,96,48,96],"y":[176,192,208,160,176,208,224,32,48,64,144,224,208,128,96,240,112,208,160,192,208,208,240,192,240,144,80,160,208,160,176,192,240,128,240,240,144,48,192,224,192,240,16,160,176,16,224,224,240,224,192,176,16,160,240,224,160,240,160,192,80,176,240,208,192,224,112,208,224,128,176,144,176,112,224,144,208,224,176,208,208,96,64,32,176,112,144,144,112,176,192,160,160,240,240],"z":6,"coord":{"x":18,"y":24,"z":6},"timeCount":[95],"timeIndex":[0],"renderDataPos":[0,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],"renderData":[3,4,3,3,3,4,2,1,1,1,1,5,2,3,1,11,2,5,2,6,2,4,4,5,1,1,1,1,1,1,2,1,8,7,15,1,8,1,1,4,3,6,1,1,1,2,2,1,5,2,4,1,1,2,2,1,1,5,2,4,1,1,2,2,2,5,2,6,8,1,2,1,1,2,1,1,1,2,3,1,4,1,2,1,3,1,4,1,1,2,1,2,2,4,2],"maxDate":0};
 
+	var grid = gridData(tile);
 	var canvas = document.getElementById("sample");
 	var ctx = canvas.getContext("2d");
-	// for (var y = 0;  y < grid.length; y++){
-	// 	for (var x = 0;  x < grid[0].length; x++){
-	// 		ctx.beginPath();
-	// 		ctx.arc(20 + x*20, 20 + y*20, 3, 0, 2 * Math.PI, false);
-	// 		var value = grid[y][x];
-	// 		ctx.fillStyle = "rgb("+0+", "+value * 50+", "+value * 50+")";
-	// 		if(value === 0) ctx.fillStyle = "red";
-	// 		ctx.fill();
-	// 	}
-	// }
+	for (var y = 0;  y < grid.length; y++){
+		for (var x = 0;  x < grid[0].length; x++){
+			ctx.beginPath();
+			ctx.arc(20 + x*20, 20 + y*20, 3, 0, 2 * Math.PI, false);
+			var value = grid[y][x];
+			ctx.fillStyle = "rgb("+0+", "+value * 50+", "+value * 50+")";
+			if(value === 0) ctx.fillStyle = "red";
+			ctx.fill();
+		}
+	}
 
 	var cellsX = grid[0].length-1;
 	var cellsY = grid.length-1;
@@ -44,6 +45,24 @@
 		}
 	}
 
+	function gridData(tile){
+    var res = 16;
+    var grid = new Array(256/res);
+    for(var i =0; i<grid.length; i ++){
+      grid[i] = new Array(256/res);
+      for(var j =0; j < grid[i].length; j++){
+        grid[i][j] = 0;
+      }
+    }
+
+    for(var i =0; i < tile.renderData.length; i++){
+      var x = tile.x[i], y = tile.y[i];
+      grid[y/res][x/res] = tile.renderData[i];
+    }
+
+    return grid;
+  }
+
 	function getPipe(cell, contour){
 		var parsedCell = cell.map(function(cornerValue){
 				if (cornerValue > contour){
