6

Can someone provide some insight on 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 between -10 and 10)

I know extent is used to set the maximum and minimum.

I know how to define a scale, 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 issue is that I want to define thresholds for my data, very simple 0-98 Red 98-100 Pink 100 Blue

Or maybe just 0-99.99 Red 100 Blue

But I'm not being able to use all what I've read to construct something that works.

1 Answers1

1

I'm guessing that you just want to use a different color to represent anomalies in your data. If that is true, you don't need to create a domain and range.

You can just create a custom color palette like this: 

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 constructed using the palette on this page with an extra red color tacked on to the end.

Then just call the custom colors like this:

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

Play around with the colors until you find a combination that you like. In this above example, only the outlier will be in red while the rest will follow the blue and green pattern.

Hope this helps!