Cubism.js - range to color mapping

Question

I'm using cubism.js to generate a CPU utilization timeseries. I have the series displaying however I'm noticing something strange regarding how colors are assigned to values.

For example the value 10 is getting the same color as value 100 (red). I've defined 50 colors below. I expect that every 5 values (above 0) will be assigned to the corresponding color.

I would have expected the value 10 to get the color #00DDDD and value 100 to get the color #FF0000.

Where is the mapping from scale range to color defined?

Here's the snippet of the section of code I'm talking about.

var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
"#00BBBB", "#00CCCC", "#00DDDD", "#00EEEE", "#00FFFF", "#00BB5E", "#00CC66", "#00DD6F", "#00EE77", "#00FF84", "#BBBB00", "#CCCC00", "#DDDD00", "#EEEE00", "#FFFF00J", "#BB5E00", "#CC6600m", "#DD6F00", "#EE7700", "#FF8000", "#BB0000", "#CC0000", "#DD0000", "#EE0000", "#FF0000"];

// Iterate through each search criteria, passing the host, criteria tuple.
// Queries and returns app server metrics, finally graphing accordingly.

var scale = d3.scale.linear().range([0,100]);
d3.select("body").selectAll(".horizon")
    .data(search_criterias.map(app_server_data_collector))
    .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon().scale(scale).colors(colors).format(d3.format("+,")));

score 4 · Answer 1 · edited May 23 '17 at 11:59

Similar to this question: Color bands for cubism.js

Cubism uses the extent option to set the min and max values of the horizon chart, not the range of the scale. If you don't explicitly set an extent, it will just use the min and max values in your data, which may not give you the color bands you want. Instead, make sure you add horizon.extent([0, 100]) instead of the scale range.

Also, it looks like you intend for all your data to be positive. Remember that horizon charts assign the first half of the colors to negative values and the second half to positive values. If you only have positive values, the first half of your color array will just be ignored.

Cubism.js - range to color mapping

1 Answers1