Getting rid of plotter
This commit is contained in:
parent
8d158fc3ae
commit
7d9407e76d
@ -53,7 +53,6 @@
|
|||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading"><big>Semantic tweaks to <span id="keyword" class="text-primary"></span></big></div>
|
<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="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
|
||||||
@ -62,20 +61,6 @@
|
|||||||
<input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
|
<input type="checkbox" id="useRelativeScale" name="useRelativeScale"> Use relative scale
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -116,7 +101,6 @@
|
|||||||
<script src="bower_components/fabric/dist/fabric.min.js"></script>
|
<script src="bower_components/fabric/dist/fabric.min.js"></script>
|
||||||
|
|
||||||
<script src="grapher.js"></script>
|
<script src="grapher.js"></script>
|
||||||
<script src="plotter.js"></script>
|
|
||||||
<script src="projection.js"></script>
|
<script src="projection.js"></script>
|
||||||
<script src="keywords.json"></script>
|
<script src="keywords.json"></script>
|
||||||
<script src="data.json"></script>
|
<script src="data.json"></script>
|
||||||
|
|||||||
@ -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 = [];
|
|
||||||
}
|
|
||||||
@ -133,7 +133,6 @@ function outputResults(results, maxResults) {
|
|||||||
function onAdjust(name, value) {
|
function onAdjust(name, value) {
|
||||||
var wa = window.adjuster;
|
var wa = window.adjuster;
|
||||||
var wg = window.grapher;
|
var wg = window.grapher;
|
||||||
var wp = window.plotter;
|
|
||||||
|
|
||||||
wa.queryParams[name] = value;
|
wa.queryParams[name] = value;
|
||||||
console.log(wa.queryParams);
|
console.log(wa.queryParams);
|
||||||
@ -144,15 +143,6 @@ function onAdjust(name, value) {
|
|||||||
});
|
});
|
||||||
wg.setColumnHints(hintData);
|
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);
|
var results = searchData(wa.queryParams, wa.minScore);
|
||||||
outputResults(results, wa.maxResults);
|
outputResults(results, wa.maxResults);
|
||||||
}
|
}
|
||||||
@ -200,17 +190,6 @@ function onQuery() {
|
|||||||
window.grapher.setColumns(graphColumns);
|
window.grapher.setColumns(graphColumns);
|
||||||
window.grapher.setValueChangedListener(onAdjust);
|
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);
|
var results = searchData(queryParams, minScore);
|
||||||
outputResults(results, maxResults);
|
outputResults(results, maxResults);
|
||||||
|
|
||||||
@ -224,21 +203,6 @@ function onQuery() {
|
|||||||
$('#useRelativeScale').click(function() {
|
$('#useRelativeScale').click(function() {
|
||||||
var useRelativeScale = $('#useRelativeScale').is(':checked');
|
var useRelativeScale = $('#useRelativeScale').is(':checked');
|
||||||
window.grapher.setUseRelativeScale(useRelativeScale);
|
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() {
|
$('#input').fadeOut(function() {
|
||||||
$('#output').fadeIn();
|
$('#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);
|
$('#search').click(onQuery);
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user