From 763a4e251c18da1495c77817a796bcd07b189e74 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 11:13:28 -0400 Subject: [PATCH 01/11] update --- templates/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/index.html b/templates/index.html index 504b7cd..c56c86c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -15,9 +15,9 @@ } circle { - fill-opacity: 0; - stroke: red; - stroke-width: 5px; + fill-opacity: .3; + fill: red; + stroke-width: 0px; } @@ -70,7 +70,6 @@ circles.enter() .append("circle") - .attr("r", 10); // function to update the data function update() { @@ -93,7 +92,8 @@ // 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("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); }); }; // call function to From 62ebb44248b7c2c9bbddccee3df9456a08dbd239 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 11:16:08 -0400 Subject: [PATCH 02/11] update --- templates/index.html | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/templates/index.html b/templates/index.html index c56c86c..b39707b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,6 +9,9 @@ body { padding: 0; margin: 0; + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; + line-height: 18px; } html, body, #map { height: 100%; @@ -19,6 +22,16 @@ fill: red; stroke-width: 0px; } + + div.tooltip{ + padding: 6px; + background: white; + } + + p.tooltip{ + margin: 0px; + padding: 0px; + } @@ -30,6 +43,19 @@ + + + + + + + + + + +
+ +
+

This is the title

+

This is the price

+
+ + + + + \ No newline at end of file From 10f5835a02bd1b0cce36f354da9a5b9f0fb4ff11 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 17:58:29 -0400 Subject: [PATCH 05/11] update --- app.py | 4 ++ templates/index.html | 110 ++++++++++++++++++++++--------------------- 2 files changed, 61 insertions(+), 53 deletions(-) diff --git a/app.py b/app.py index bdf9eda..b8b1f51 100644 --- a/app.py +++ b/app.py @@ -4,6 +4,7 @@ import json import time import sys +import random import pyorient @@ -39,6 +40,9 @@ def getData(): records = client.command(query.format(lat1, lat2, lng1, lng2)) + random.shuffle(records) + records = records[:100] + numListings = len(records) print 'received ' + str(numListings) + ' records' diff --git a/templates/index.html b/templates/index.html index 17f368c..ce37014 100644 --- a/templates/index.html +++ b/templates/index.html @@ -67,8 +67,8 @@

DMC Web Stack

-

Heat Map

-

+

Heat Map

+

@@ -114,57 +114,61 @@ var transform = d3.geo.transform({point: projectStream}); var path = d3.geo.path().projection(transform); - d3.json("/getData/", 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"); - }) - ; - - // function to update the data - function update() { - - // 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); }); - }; - - // call function to - update(); - map.on("viewreset", update); - - }); + function updateData(){ + d3.json("/getData/", 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"); + }) + ; + + // function to update the data + function update() { + + // 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); }); + }; + + // call function to + update(); + map.on("viewreset", update); + }); + + }; + + updateData(); From 817d9098563c7620ecc5a5ca4f600be27857c5d2 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 18:27:25 -0400 Subject: [PATCH 06/11] update --- templates/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/index.html b/templates/index.html index ce37014..4c1b488 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,6 +1,6 @@ - Flask Demo + DMC Web Stack From 659ebf15a6839ba55955dad6c6d20d044236c9f5 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 18:27:48 -0400 Subject: [PATCH 07/11] update --- templates/index1.html | 149 ------------------------------------------ 1 file changed, 149 deletions(-) delete mode 100644 templates/index1.html diff --git a/templates/index1.html b/templates/index1.html deleted file mode 100644 index 432a882..0000000 --- a/templates/index1.html +++ /dev/null @@ -1,149 +0,0 @@ - - - Flask Demo - - - - - - - - - - - -
- -
-

This is the title

-

This is the price

-
- - - - - \ No newline at end of file From c5e3bbef5042b5c7f3bc7104fd8377dfc4a32125 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Fri, 25 Sep 2015 20:40:01 -0400 Subject: [PATCH 08/11] part 1, query strings --- app.py | 14 ++++++++------ templates/index.html | 13 ++++++++++++- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/app.py b/app.py index b8b1f51..999db88 100644 --- a/app.py +++ b/app.py @@ -1,5 +1,6 @@ from flask import Flask from flask import render_template +from flask import request import json import time @@ -16,6 +17,13 @@ def index(): @app.route("/getData/") def getData(): + + lat1 = str(request.args.get('lat1')) + lng1 = str(request.args.get('lng1')) + lat2 = str(request.args.get('lat2')) + lng2 = str(request.args.get('lng2')) + + print "received coordinates: [" + lat1 + ", " + lat2 + "], [" + lng1 + ", " + lng2 + "]" client = pyorient.OrientDB("localhost", 2424) session_id = client.connect("root", "password") @@ -29,12 +37,6 @@ def getData(): else: print "database [" + db_name + "] does not exist! session ending..." sys.exit() - - lat1 = 22.532498 - lat2 = 22.552317 - - lng1 = 114.044329 - lng2 = 114.076644 query = 'SELECT FROM Listing WHERE latitude BETWEEN {} AND {} AND longitude BETWEEN {} AND {}' diff --git a/templates/index.html b/templates/index.html index 4c1b488..c16e4b5 100644 --- a/templates/index.html +++ b/templates/index.html @@ -115,7 +115,18 @@ var path = d3.geo.path().projection(transform); function updateData(){ - d3.json("/getData/", function(data) { + + var mapBounds = map.getBounds(); + var lat1 = mapBounds["_southWest"]["lat"]; + var lat2 = mapBounds["_northEast"]["lat"]; + var lng1 = mapBounds["_southWest"]["lng"]; + var lng2 = mapBounds["_northEast"]["lng"]; + + request = "/getData?lat1=" + lat1 + "&lat2=" + lat2 + "&lng1=" + lng1 + "&lng2=" + lng2 + + 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); From 6a9acbb58b57f598d1181fd118656e504b508202 Mon Sep 17 00:00:00 2001 From: danilnagy Date: Tue, 29 Sep 2015 00:34:49 -0400 Subject: [PATCH 09/11] update --- app.py | 20 ++++++++++++++++++++ templates/index.html | 13 +++++++++++++ 2 files changed, 33 insertions(+) diff --git a/app.py b/app.py index 999db88..da72b26 100644 --- a/app.py +++ b/app.py @@ -1,6 +1,7 @@ from flask import Flask from flask import render_template from flask import request +from flask import Response import json import time @@ -9,8 +10,23 @@ import pyorient +from Queue import Queue + app = Flask(__name__) +q = Queue() + +def event_stream(): + while True: + result = q.get() + yield 'data: %s\n\n' % str(result) + +@app.route('/eventSource/') +def sse_source(): + return Response( + event_stream(), + mimetype='text/event-stream') + @app.route("/") def index(): return render_template("index.html") @@ -18,6 +34,8 @@ def index(): @app.route("/getData/") def getData(): + q.put("starting data query...") + lat1 = str(request.args.get('lat1')) lng1 = str(request.args.get('lng1')) lat2 = str(request.args.get('lat2')) @@ -61,6 +79,8 @@ def getData(): output["features"].append(feature) + q.put('idle') + return json.dumps(output) if __name__ == "__main__": diff --git a/templates/index.html b/templates/index.html index c16e4b5..c9b0ab4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,6 +50,11 @@ height: 500px; background: rgba(255,255,255,.8); } + + em{ + color: red; + font-weight: bold; + } @@ -69,12 +74,20 @@

Heat Map

+

Status: