Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Include raphaeljs on your page and paste the functions <code>estimateColorForValue()</code> and <code>toHex()</code> somewhere in your code. <code>estimateColorForValue(hue, value, darkestValue, brightestValue)</code> computes a color for some value, interpolating the color by seeing where in the range <code>[darkestValue-brightestValue]</code> <code>value</code> is. <code>hue</code> is in the range <code>[0-1]</code>: <code>0.1</code> for orange-browny, <code>0.4</code> for green, <code>0.8</code> for pinkish, and many more colors in between. small changes in hue drastically change the visual color.</p> <p>For example: <code>estimateColorForValue(.1, 15, 1, 20)</code>, can be explained as, for data ranging 1 through 20, compute color for value 15, in the orangy space.</p> <p><code>toHex(estimateColorForValue(.1, 15, 1, 20)) ==&gt; "#cf8415"</code></p> <p>Code:</p> <pre><code>&lt;script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"&gt;&lt;/script&gt; &lt;script&gt; function toHex(hsb) { return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex; } function estimateColorForValue(hue, value, darkestValue, brightestValue) { // Constants to determine saturation and brightness var darkBrightness = 0.6; var brightBrightness = 1; var darkSaturation = 0.3; var brightSaturation = 1; // Compute saturation and brightness: var gradient = (value - darkestValue) / (brightestValue - darkestValue); var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation); var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness); return {h: hue, s:saturation, b:brightness}; } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload