Getting rid of plotter

client/index.html

@@ -53,28 +53,13 @@
                     <div class="panel panel-default">
                         <div class="panel-heading"><big>Semantic tweaks to <span id="keyword" class="text-primary"></span></big></div>
                         <div class="row" style="padding: 10px;">
-                            <div class="col-md-7">
+                            <canvas id="grapher" width="500" height="550"></canvas><br>
-                                <canvas id="grapher" width="500" height="550"></canvas><br>
+                            <label class="checkbox-inline">
-                                <label class="checkbox-inline">
+                                <input type="checkbox" id="useLocalScale" name="useLocalScale"> Use local scale
-                                    <input type="checkbox" id="useLocalScale" name="useLocalScale"> Use local scale
+                            </label>
-                                </label>
+                            <label class="checkbox-inline">
-                                <label class="checkbox-inline">
+                                <input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
-                                    <input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
+                            </label>
-                                </label>
-                            </div>
-                            <div class="col-md-5">
-                                <div class="text-center">
-                                    <canvas id="plotter" width="350" height="350" style="border: 1px #d3d7cf solid;"></canvas>
-                                </div>
-                                <div class="form-group">
-                                    <label class="control-label" for="plotAxisX">Plotter X axis</label>
-                                    <select class="form-control plotAxes" name="plotAxisX" id="plotAxisX"></select>
-                                </div>
-                                <div class="form-group">
-                                    <label class="control-label" for="plotAxisY">Plotter Y axis</label>
-                                    <select class="form-control plotAxes" name="plotAxisY" id="plotAxisY"></select>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </form>
@@ -116,7 +101,6 @@
         <script src="bower_components/fabric/dist/fabric.min.js"></script>
 
         <script src="grapher.js"></script>
-        <script src="plotter.js"></script>
         <script src="projection.js"></script>
         <script src="keywords.json"></script>
         <script src="data.json"></script>

client/plotter.js

@@ -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    = [];
-}

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($('<option></option>', {
-            'value': feature,
-            'text':  feature
-        }));
-
-        $('#plotAxisY').append($('<option></option>', {
-            'value': feature,
-            'text':  feature
-        }));
-    });
-
-    $('#plotAxisX').val(features[0]);
-    $('#plotAxisY').val(features[1]);
-
     $('#search').click(onQuery);
 });