alex/restaurant-search
1
Fork 0
Code Releases Activity

Desaturate bar graph color based on value

Browse Source
This commit is contained in:
Alex Yatskov 2014-09-25 18:56:04 +09:00
parent eb34023ad8
commit fcab0c5ece
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/bower.json
View File

@ -18,6 +18,7 @@
"fabric": "~1.4.8",
"handlebars": "~1.3.0",
"underscore": "~1.6.0",
"bootstrap-select": "~1.6.2"
"bootstrap-select": "~1.6.2",
"tinycolor": "~1.0.0"
}
}

21
client/grapher.js
View File

@ -1,6 +1,5 @@
'use strict';
goog.require('goog.color');
goog.require('goog.math');
goog.require('goog.math.Coordinate');
goog.require('goog.math.Range');
@ -144,7 +143,8 @@ function Column(canvas, name, params, scale, range, bounds) {
}
var colorByte = 0xff - Math.min(0xff, Math.round(0xff * colorPercent));
var colorStr = goog.color.rgbToHex(colorByte, colorByte, colorByte);
var colorObj = tinycolor({ r: colorByte, g: colorByte, b: colorByte });
var colorStr = colorObj.toHexString();
colorStops[index / steps] = colorStr;
});
@ -237,12 +237,23 @@ function Column(canvas, name, params, scale, range, bounds) {
return handleBounds;
}
this.valueColorAdjust = function(color, offset) {
var colorObj = tinycolor(color);
var rangeEnd = this.value >= 0.0 ? this.range.end : this.range.start;
var rangeMid = (this.range.start + this.range.end) / 2.0;
var rangeRat = (this.value - rangeMid) / (rangeEnd - rangeMid);
var desatVal = Math.max(0.0, 1.0 - rangeRat + offset) * 100.0;
return colorObj.desaturate(desatVal).toHexString();
}
this.getFillColor = function() {
return this.value >= 0.0 ? this.fillColorPos : this.fillColorNeg;
var color = this.value >= 0.0 ? this.fillColorPos : this.fillColorNeg;
return this.valueColorAdjust(color, this.desatOffset);
}
this.getHandleColor = function() {
return this.value >= 0.0 ? this.handleColorPos : this.handleColorNeg;
var color = this.value >= 0.0 ? this.handleColorPos : this.handleColorNeg;
return this.valueColorAdjust(color, this.desatOffset);
}
this.mouseDown = function(position) {
@ -352,7 +363,7 @@ function Column(canvas, name, params, scale, range, bounds) {
};
this.handleSize = 10;
this.handleDarken = 0.25;
this.desatOffset = -0.40;
this.hintSize = 10;
this.labelFontSize = 15;
this.labelSize = 20;

7
client/index.html
View File

@ -121,9 +121,9 @@
<div class="panel-heading">
<big>Semantic tweaks to <span id="query" class="text-primary"></span></big>
<div class="btn-group pull-right">
<button class="btn btn-xs btn-success" data-toggle="modal" data-target="#learnDialog">Learn...</button>
<button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#forgetDialog">Forget...</button>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target="#optionsDialog">Options...</button>
<button class="btn btn-xs btn-success" data-toggle="modal" data-target="#learnDialog">Learn</button>
<button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#forgetDialog">Forget</button>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target="#optionsDialog">Options</button>
</div>
</div>
<div style="padding: 10px;" class="unselectable">
@ -168,6 +168,7 @@
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/fabric/dist/fabric.min.js"></script>
<script src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="bower_components/tinycolor/tinycolor.js"></script>
<script src="application.js"></script>
<script src="grapher.js"></script>