Databases
StackOverflow2013
Postsdbo
POD3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
    text
    copied!<p>I am trying to create a linear color scale for a heatmap. I want to color scale to go through a large set of specific colors, where the first color corresponds to the min of the data and the last color should be given to the max of the data. </p> <p>I know that I can do this by also giving the domain 17 values in between the min and max, but I do not know how to do this dynamically if the user is able to change the dataset (and thus change the coloring of the heatmap)</p> <p>In essence I would like to following, but I know it does not work</p> <pre><code>var colorScale = d3.scale.linear() .range(["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB", "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"]) .domain([d3.min(dataset, function(d) {return d;}), d3.max(dataset, function(d) {return d;})]); </code></pre> <p>Can anybody please tell me what I need to put into 'domain' to make it work?</p> <p>EDIT: I did find something that does what I want. Using R I calculated 256 colors in between the 17 from above with the designer.colors functions and put this into the range. This does give the feeling of a continous color scale</p> <pre><code>var colorScale = d3.scale.linear() .range(["#6363FF", "#6364FF", "#6364FF", "#6365FF", "... several other lines with color codes ..." "#FF6764", "#FF6564", "#FF6464", "#FF6364"]) .domain(d3.range(1,257)); var quantize = d3.scale.quantile() .range(d3.range(1,257)) .domain([d3.min(dataset, function(d) {return d;}), d3.max(dataset, function(d) {return d;})]); </code></pre> <p>Now I can use the color in this fashion </p> <pre><code>colorScale(quantize(dataset)) </code></pre> <p>But I'm wondering if this can also be done in less lines of code?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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