Scale and Volume Cubism.js / d3.js

Question

Can someone give some insight into how scales and extents work together in cubism.js

.call(context.horizon() .extent([-100, 100]) .scale(d3.scale.linear().domain([-10,10]).range([-100,100]) ) ); 

For example, what does the code above do? If the values ​​are generated using a random number generator (numbers from -10 to 10)

I know that the degree is used to set the maximum and minimum values.

I know how to determine the scale, for example:

 var scale = d3.scale.threshold().domain([100]).range([0,100]) console.log(scale(1)) // returns 0 console.log(scale(99.9)) // returns 0 console.log(scale(88.9)) // returns 0 console.log(scale(100)) // returns 100 

I read about d3.scales here http://alignedleft.com/tutorials/d3/scales/

My main problem is that I want to define threshold values ​​for my data, very simple 0-98 Red 98-100 Pink 100 Blue

Or maybe just 0-99.99 Red 100 Blue

But I cannot use everything that I read to create something that works.

Answer 1

I assume that you just want to use a different color to represent anomalies in your data. If so, you do not need to create a domain and range.

You can simply create a custom color palette as follows:

 var custom_colors = ['#ef3b2c', '#084594', '#2171b5', '#4292c6', '#6baed6', '#9ecae1', '#c6dbef', '#deebf7', '#f7fbff', '#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b']; 

This color palette was built using the palette on this page with the addition of additional red color to the end.

Then just call custom colors like this:

 d3.select("#testdiv") .selectAll(".horizon") ... .call(context.horizon() .colors(custom_colors) )); 

Play with colors until you find the combination you like. In the above example, only the outlier will be red, and the rest will be blue and green.

Hope this helps!