diff --git a/client/index.html b/client/index.html index b462858..3ac13a0 100644 --- a/client/index.html +++ b/client/index.html @@ -53,28 +53,13 @@
Semantic tweaks to
-
-
- - -
-
-
- -
-
- - -
-
- - -
-
+
+ +
@@ -116,7 +101,6 @@ - diff --git a/client/plotter.js b/client/plotter.js deleted file mode 100644 index 090db9c..0000000 --- a/client/plotter.js +++ /dev/null @@ -1,108 +0,0 @@ -'use strict'; - -goog.require('goog.color'); -goog.require('goog.math'); -goog.require('goog.math.Coordinate'); -goog.require('goog.math.Range'); - -function Plotter(canvas, useRelativeScale) { - this.setRange = function(rangeX, rangeY) { - this.rangeX = rangeX; - this.rangeY = rangeY; - } - - this.setData = function(data) { - this.data = data; - } - - this.setPosition = function(position) { - this.position = position; - } - - this.setUseRelativeScale = function(useRelativeScale) { - this.useRelativeScale = useRelativeScale; - } - - this.updateShapes = function() { - var counts = _.pluck(this.data, 'count'); - var min = this.useRelativeScale ? _.min(counts) : 0.0; - var scale = new goog.math.Range(min, _.max(counts)); - var index = 0; - - for (var i = 0, count = this.data.length; i < count; ++i) { - var value = this.data[i]; - - var colorPercent = 0; - if (scale.getLength() > 0) { - colorPercent = Math.max(0, value.count - scale.start) / scale.getLength(); - } - - if (colorPercent < 0.01) { - continue; - } - - var colorByte = 0xff - Math.min(0xff, Math.round(0xff * colorPercent)); - var colorStr = goog.color.rgbToHex(colorByte, colorByte, colorByte); - - var position = new goog.math.Coordinate(value.sampleX, value.sampleY); - var marker = null; - - if (this.dataMarkers.length <= index) { - marker = this.addDataPoint(position, 10.0, colorStr); - this.dataMarkers.push(marker); - } - else { - marker = this.dataMarkers[index]; - marker.set(this.convertPosition(position)); - marker.set({ 'fill': colorStr }); - } - - ++index; - }; - - for (var i = index; i < this.dataMarkers.length; ++i) { - this.canvas.remove(this.dataMarkers[i]); - } - this.dataMarkers.splice(index, this.dataMarkers.length); - - this.positionMarker.set(this.convertPosition(this.position)); - this.positionMarker.bringToFront(); - - this.canvas.renderAll(); - } - - this.addDataPoint = function(position, radius, color) { - var params = { - 'originX': 'center', - 'originY': 'center', - 'fill': color, - 'radius': radius - }; - - _.extend(params, this.convertPosition(position)); - - var shape = new fabric.Circle(params); - this.canvas.add(shape); - - return shape; - } - - this.convertPosition = function(coordinate) { - var percentX = (coordinate.x - this.rangeX.start) / this.rangeX.getLength(); - var percentY = (coordinate.y - this.rangeY.start) / this.rangeY.getLength(); - - return { - 'left': percentX * this.canvas.width, - 'top': (1 - percentY) * this.canvas.height - }; - } - - this.setRange(new goog.math.Range(-1.0, 1.0), new goog.math.Range(-1.0, 1.0)); - this.setData([]); - this.setPosition(new goog.math.Coordinate(0.0, 0.0)); - this.setUseRelativeScale(true); - - this.canvas = new fabric.StaticCanvas(canvas); - this.positionMarker = this.addDataPoint(this.position, 5.0, '#ef2929'); - this.dataMarkers = []; -} diff --git a/client/projection.js b/client/projection.js index 55beaa8..afec5c4 100644 --- a/client/projection.js +++ b/client/projection.js @@ -133,7 +133,6 @@ function outputResults(results, maxResults) { function onAdjust(name, value) { var wa = window.adjuster; var wg = window.grapher; - var wp = window.plotter; wa.queryParams[name] = value; console.log(wa.queryParams); @@ -144,15 +143,6 @@ function onAdjust(name, value) { }); wg.setColumnHints(hintData); - var plotterAxisX = $('#plotAxisX').val(); - var plotterAxisY = $('#plotAxisY').val(); - var plotterData = searchBuildHints2d(wa.queryParams, wa.minScore, plotterAxisX, plotterAxisY, wa.searchRange, wa.hintSteps) - var plotterPosition = new goog.math.Coordinate(wa.queryParams[plotterAxisX], wa.queryParams[plotterAxisY]); - - wp.setPosition(plotterPosition); - wp.setData(plotterData); - wp.updateShapes(); - var results = searchData(wa.queryParams, wa.minScore); outputResults(results, wa.maxResults); } @@ -200,17 +190,6 @@ function onQuery() { window.grapher.setColumns(graphColumns); window.grapher.setValueChangedListener(onAdjust); - var plotterAxisX = $('#plotAxisX').val(); - var plotterAxisY = $('#plotAxisY').val(); - var plotterData = searchBuildHints2d(queryParams, minScore, plotterAxisX, plotterAxisY, searchRange, hintSteps) - var plotterPosition = new goog.math.Coordinate(queryParams[plotterAxisX], queryParams[plotterAxisY]); - - window.plotter = new Plotter('plotter', useRelativeScale); - window.plotter.setUseRelativeScale(useRelativeScale); - window.plotter.setPosition(plotterPosition); - window.plotter.setData(plotterData); - window.plotter.updateShapes(); - var results = searchData(queryParams, minScore); outputResults(results, maxResults); @@ -224,21 +203,6 @@ function onQuery() { $('#useRelativeScale').click(function() { var useRelativeScale = $('#useRelativeScale').is(':checked'); window.grapher.setUseRelativeScale(useRelativeScale); - window.plotter.setUseRelativeScale(useRelativeScale); - window.plotter.updateShapes(); - }); - $('.plotAxes').change(function() { - var wa = window.adjuster; - var wp = window.plotter; - - var plotterAxisX = $('#plotAxisX').val(); - var plotterAxisY = $('#plotAxisY').val(); - var plotterData = searchBuildHints2d(wa.queryParams, wa.minScore, plotterAxisX, plotterAxisY, wa.searchRange, wa.hintSteps) - var plotterPosition = new goog.math.Coordinate(wa.queryParams[plotterAxisX], wa.queryParams[plotterAxisY]); - - wp.setPosition(plotterPosition); - wp.setData(plotterData); - wp.updateShapes(); }); $('#input').fadeOut(function() { $('#output').fadeIn(); @@ -253,21 +217,5 @@ $(document).ready(function() { })); } - var features = ['food', 'service', 'value', 'atmosphere']; - _.each(features, function(feature) { - $('#plotAxisX').append($('', { - 'value': feature, - 'text': feature - })); - - $('#plotAxisY').append($('', { - 'value': feature, - 'text': feature - })); - }); - - $('#plotAxisX').val(features[0]); - $('#plotAxisY').val(features[1]); - $('#search').click(onQuery); });