04 assignment

app.py

@@ -7,6 +7,7 @@
 import time
 import sys
 import random
+import math
 
 import pyorient
 
@@ -16,6 +17,29 @@
 
 q = Queue()
 
+def point_distance(x1, y1, x2, y2):
+    return ((x1-x2)**2.0 + (y1-y2)**2.0)**(0.5)
+
+def remap(value, min1, max1, min2, max2):
+    return float(min2) + (float(value) - float(min1)) * (float(max2) - float(min2)) / (float(max1) - float(min1))
+
+def normalizeArray(inputArray):
+    maxVal = 0
+    minVal = 100000000000
+
+    for j in range(len(inputArray)):
+        for i in range(len(inputArray[j])):
+            if inputArray[j][i] > maxVal:
+                maxVal = inputArray[j][i]
+            if inputArray[j][i] < minVal:
+                minVal = inputArray[j][i]
+
+    for j in range(len(inputArray)):
+        for i in range(len(inputArray[j])):
+            inputArray[j][i] = remap(inputArray[j][i], minVal, maxVal, 0, 1)
+
+    return inputArray
+
 def event_stream():
     while True:
         result = q.get()
@@ -41,11 +65,17 @@ def getData():
 	lat2 = str(request.args.get('lat2'))
 	lng2 = str(request.args.get('lng2'))
 
+	w = float(request.args.get('w'))
+	h = float(request.args.get('h'))
+	cell_size = float(request.args.get('cell_size'))
+
+        analysis = request.args.get('analysis')
+
 	print "received coordinates: [" + lat1 + ", " + lat2 + "], [" + lng1 + ", " + lng2 + "]"
 
 	client = pyorient.OrientDB("localhost", 2424)
-	session_id = client.connect("root", "password")
-	db_name = "property_test"
+	session_id = client.connect("root", "admin")
+	db_name = "soufun"
 	db_username = "admin"
 	db_password = "admin"
 
@@ -79,8 +109,54 @@ def getData():
 
 		output["features"].append(feature)
 
-	q.put('idle')
+	if analysis == "false":
+	       q.put('idle')
+	       return json.dumps(output)
+
+	q.put('starting analysis...')
+
+	output["analysis"] = []
 
+	numW = int(math.floor(w/cell_size))
+	numH = int(math.floor(h/cell_size))
+
+
+
+	grid = []
+	for j in range(numH):
+            grid.append([])
+            for i in range(numW):
+                grid[j].append(0)
+
+        for record in records:
+
+            pos_x = int(remap(record.longitude, lng1, lng2, 0, numW))
+            pos_y = int(remap(record.latitude, lat1, lat2, numH, 0))
+
+            spread = 15
+
+            for j in range(max(0, (pos_y-spread)), min(numH, (pos_y+spread))):
+                for i in range(max(0, (pos_x-spread)), min(numW, (pos_x+spread))):
+                    grid[j][i] += 2 * math.exp((-point_distance(i,j,pos_x,pos_y)**2)/(2*5**2))
+
+	grid = normalizeArray(grid)
+
+	offsetLeft = (w - numW * cell_size) / 2.0 ;
+	offsetTop = (h - numH * cell_size) / 2.0 ;
+
+	for j in range(numH):
+		for i in range(numW):
+			newItem = {}
+
+			newItem['x'] = offsetLeft + i*cell_size
+			newItem['y'] = offsetTop + j*cell_size
+			newItem['width'] = cell_size-1
+			newItem['height'] = cell_size-1
+			newItem['value'] = grid[j][i]
+
+			output["analysis"].append(newItem)
+        q.put('idle')     
+
 	return json.dumps(output)
 
 if __name__ == "__main__":

static/script.js

@@ -0,0 +1,147 @@
+
+
+var eventOutputContainer = document.getElementById("message");
+var eventSrc = new EventSource("/eventSource");
+
+eventSrc.onmessage = function(e) {
+	console.log(e);
+	eventOutputContainer.innerHTML = e.data;
+};
+
+var tooltip = d3.select("div.tooltip");
+var tooltip_title = d3.select("#title");
+var tooltip_price = d3.select("#price");
+
+
+var map = L.map('map').setView([22.539029, 114.062076], 16);
+
+//this is the OpenStreetMap tile implementation
+
+L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+	attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+//uncomment for Mapbox implementation, and supply your own access token
+
+// L.tileLayer('https://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={accessToken}', {
+// 	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+// 	mapid: 'mapbox.light',
+// 	accessToken: [INSERT YOUR TOKEN HERE!]
+// }).addTo(map);
+
+//create variables to store a reference to svg and g elements
+
+
+
+var svg_overlay = d3.select(map.getPanes().overlayPane).append("svg");
+var g_overlay = svg_overlay.append("g").attr("class", "leaflet-zoom-hide");
+
+var svg = d3.select(map.getPanes().overlayPane).append("svg");
+var g = svg.append("g").attr("class", "leaflet-zoom-hide");
+
+function projectPoint(lat, lng) {
+	return map.latLngToLayerPoint(new L.LatLng(lat, lng));
+}
+
+function projectStream(lat, lng) {
+	var point = projectPoint(lat,lng);
+	this.stream.point(point.x, point.y);
+}
+
+var transform = d3.geo.transform({point: projectStream});
+var path = d3.geo.path().projection(transform);
+
+function updateData(){
+
+	var mapBounds = map.getBounds();
+	var lat1 = mapBounds["_southWest"]["lat"];
+	var lat2 = mapBounds["_northEast"]["lat"];
+	var lng1 = mapBounds["_southWest"]["lng"];
+	var lng2 = mapBounds["_northEast"]["lng"];
+
+	var cell_size = 25;
+	var w = window.innerWidth;
+	var h = window.innerHeight;
+
+	var checked = document.getElementById("heatmap").checked
+
+	request = "/getData?lat1=" + lat1 + "&lat2=" + lat2 + "&lng1=" + lng1 + "&lng2=" + lng2 + "&w=" + w + "&h=" + h + "&cell_size=" + cell_size + "&analysis=" + checked
+
+	console.log(request);
+
+  	d3.json(request, function(data) {
+
+		//create placeholder circle geometry and bind it to data
+		var circles = g.selectAll("circle").data(data.features);
+
+		circles.enter()
+			.append("circle")
+			.on("mouseover", function(d){
+				tooltip.style("visibility", "visible");
+				tooltip_title.text(d.properties.name);
+				tooltip_price.text("Price: " + d.properties.price);
+			})
+			.on("mousemove", function(){
+				tooltip.style("top", (d3.event.pageY-10)+"px")
+				tooltip.style("left",(d3.event.pageX+10)+"px");
+			})
+			.on("mouseout", function(){
+				tooltip.style("visibility", "hidden");
+			})
+		;
+
+		// call function to update geometry
+		update();
+		map.on("viewreset", update);
+
+		if (checked == true){
+			var topleft = projectPoint(lat2, lng1);
+
+			svg_overlay.attr("width", w)
+				.attr("height", h)
+				.style("left", topleft.x + "px")
+				.style("top", topleft.y + "px");
+
+			var rectangles = g_overlay.selectAll("rect").data(data.analysis);
+			rectangles.enter().append("rect");
+		// rectangles.exit().remove();
+
+			rectangles
+				.attr("x", function(d) { return d.x; })
+				.attr("y", function(d) { return d.y; })
+				.attr("width", function(d) { return d.width; })
+				.attr("height", function(d) { return d.height; })
+	    	.attr("fill-opacity", ".2")
+	    	.attr("fill", function(d) { return "hsl(" + Math.floor((1-d.value)*250) + ", 100%, 50%)"; });
+	};	
+		// function to update the data
+		function update() {
+
+			g_overlay.selectAll("rect").remove()
+
+			// get bounding box of data
+		    var bounds = path.bounds(data),
+		        topLeft = bounds[0],
+		        bottomRight = bounds[1];
+
+		    var buffer = 50;
+
+		    // reposition the SVG to cover the features.
+		    svg .attr("width", bottomRight[0] - topLeft[0] + (buffer * 2))
+		        .attr("height", bottomRight[1] - topLeft[1] + (buffer * 2))
+		        .style("left", (topLeft[0] - buffer) + "px")
+		        .style("top", (topLeft[1] - buffer) + "px");
+
+		    g   .attr("transform", "translate(" + (-topLeft[0] + buffer) + "," + (-topLeft[1] + buffer) + ")");
+
+		    // update circle position and size
+		    circles
+		    	.attr("cx", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).x; })
+		    	.attr("cy", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).y; })
+    			.attr("r", function(d) { return Math.pow(d.properties.price,.3); });
+		};
+	});
+
+};
+
+updateData();

static/style.css

@@ -0,0 +1,49 @@
+body {
+	padding: 0;
+	margin: 0;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	line-height: 18px;
+}
+html, body, #map {
+	height: 100%;
+}
+
+circle {
+	fill-opacity: .3;
+	fill: red;
+	stroke-width: 0px;
+}
+circle:hover {
+	stroke: black;
+	stroke-width: 2px;
+	cursor: crosshair;
+}
+
+div.tooltip{
+	padding: 6px;
+	background: white;
+	visibility: hidden;
+	position: absolute;
+	z-index: 10;
+}
+p.tooltip-text{
+	margin: 0px;
+	padding: 0px;
+}
+
+div.menu{
+	position: fixed;
+	margin: 0px;
+	padding: 10px;
+	top: 0px;
+	right: 0px;
+	width: 250px;
+	height: 500px;
+	background: rgba(255,255,255,.8);
+}
+
+em{
+  color: red;
+  font-weight: bold;
+}