alex/restaurant-search
1
Fork 0
Code Releases Activity

Getting rid of plotter

Browse Source
This commit is contained in:
Alex Yatskov 2014-07-19 11:59:45 +09:00
parent 8d158fc3ae
commit 7d9407e76d
3 changed files with 7 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/index.html
View File

@ -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>
<label class="checkbox-inline">
<input type="checkbox" id="useLocalScale" name="useLocalScale"> Use local scale
</label>
<label class="checkbox-inline">
<input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
</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>
<canvas id="grapher" width="500" height="550"></canvas><br>
<label class="checkbox-inline">
<input type="checkbox" id="useLocalScale" name="useLocalScale"> Use local scale
</label>
<label class="checkbox-inline">
<input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
</label>
</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>

108
client/plotter.js
View File

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

52
client/projection.js
View File

@ -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);
});