用不同的颜色表示危险度

Author: wongsingfo

webapi/core.js

@@ -1,5 +1,115 @@
 "use strict";
 
+let maj_risk = (function() {
+
+// https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   {number}  h       The hue
+ * @param   {number}  s       The saturation
+ * @param   {number}  l       The lightness
+ * @return  {Array}           The RGB representation
+ */
+function hslToRgb(h, s, l){
+    var r, g, b;
+
+    if(s == 0){
+        r = g = b = l; // achromatic
+    }else{
+        var hue2rgb = function hue2rgb(p, q, t){
+            if(t < 0) t += 1;
+            if(t > 1) t -= 1;
+            if(t < 1/6) return p + (q - p) * 6 * t;
+            if(t < 1/2) return q;
+            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+        }
+
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   {number}  r       The red color value
+ * @param   {number}  g       The green color value
+ * @param   {number}  b       The blue color value
+ * @return  {Array}           The HSL representation
+ */
+function rgbToHsl(r, g, b){
+    r /= 255, g /= 255, b /= 255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h, s, l = (max + min) / 2;
+
+    if(max == min){
+        h = s = 0; // achromatic
+    }else{
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+
+    return [h, s, l];
+}
+
+let gradient = [
+	{ risk: 0.0 , color: [255, 255,  255] }, // 绝安，白色
+	{ risk: 1e-5 , color: [131, 179,  17] },  // 只要有一点风险，鸭绿色
+	{ risk: 8 , color:   [250, 195,  0] },  // 还可以冲一冲， 橙黄色
+	{ risk: 16 , color: [253, 99, 0] },  // 相当危险，粉色
+	{ risk: 25.0, color: [253, 0,  135] }, // 绝对危险， 红色
+];
+
+// https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function
+let zip = rows=>rows[0].map((_,c)=>rows.map(row=>row[c]));
+
+return {
+	get_rist_color(risk) {
+		risk = Math.min(risk, gradient[gradient.length-1].risk);
+
+		for (let i = 0; i + 1 < gradient.length; i++) {
+			if (risk <= gradient[i + 1].risk) {
+				// let left = rgbToHsl.apply(null, gradient[i].color);
+				// let right = rgbToHsl.apply(null, gradient[i + 1].color);
+				let left = gradient[i].color;
+				let right = gradient[i+1].color;
+				// interpolation in RGB color space
+				// HSL 效果似乎并不如人意
+				let ratio = (risk - gradient[i].risk) / (gradient[i + 1].risk - gradient[i].risk);
+				let result = zip([left, right]).map(([x, y]) => x + (y - x) * ratio);
+
+				// let rgba = hslToRgb.apply(null, (result)).join(',');
+				let rgba = result;
+				return `rgba(${rgba})`;
+			}
+		}
+
+		throw "can not find a color for the risk " + risk;
+	}
+};
+
+})(); // closure for maj_risk
+
 function tile_img_url(index) {
 	function label(index) {
 		let offset = [0, 9, 18, 27, 34];
@@ -27,14 +137,13 @@ function show_tiles(data) {
 
 	for (let i = 0; i < 34; i++) {
 		var risk = data["risk"] === null ? 0 : data["risk"][i];
-	    risk = risk / 25;
-		risk = Math.min(risk, 1.0);
+	    
 		let count = data["counts"][i];
 		for (let c = 0; c < count; c++) {
 			let img = document.createElement("img");
 			img.src = tile_img_url(i);
 			img.classList.add("tile");
-			img.style.border = `solid 3px rgba(255, 0, 0, ${risk})`;
+			img.style.border = `solid 3px ${maj_risk.get_rist_color(risk)}`;
 			container.appendChild(img);
 		}
 	}