为d3创建两种不同类型的热图

Question

Absolutely going insane trying to work this out, should have studied harder at school!

I'm wanting to achieve something that I'm convinced is quite simple to do, yet having a hard time understanding the terminology of it all.

I'm wanting to create a heatmap based on a choice of 1 of 2 settings.

First, if I have 5 countries, eg:

1. UK - 10000
2. USA - 5000
3. Brazil - 4000
4. Germany - 1000
5. China - 500

I'm trying to colours based on the ranking. So for example if I had Red, Yellow, Green, Blue and Purple, then the following would be true:

UK=Red, USA=Yellow, Brazil=Green, Germany=Blue and China=Purple.

Secondly, I want to colour them on value, so in that case the following one apply:

UK=Red, USA=Green, Brazil=Greeny Blue, Germany=Bluey Purple, China=Purple.

But I've absolutely no idea if this is a linear, ordinal, quantile or what-have-you!

I've read the instructions and it looks like the Domain is the input and the Range is the output.

I've got the following code:

 var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
 var heatmapColour = d3.scale.linear().domain([0, sortedArray.length]).range(colours);

And in that example, for the 'Ranking' I'd expect each heatMapColour to return Red, Yellow, Green, Blue and Purple but I get 5 colours ranging from Red (first position) to Yellow (last position).

Any pointers?

edit

As an example, this 'almost works' perfectly.

var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
var heatmapColour = d3.scale.quantize().domain([0, sortedArray.length-1]).range(colours);

If my array has 5 items, it produces the results one colour for each item, but if I have 10 items in my array, I have 2 red, 2 yellows, 2 greens, etc, rather than Red, Red->Orange, Orange->Yellow etc.

Likewise if I have 3 items in the array, I get Red, Green, Purple then nothing. It makes no sense!

Answer 1

For this i like to use the RainbowVis.js [ https://github.com/anomal/RainbowVis-JS] to map numeric values to colors:

something like this:

var rainbow = new Rainbow();
rainbow.setSpectrum('green', 'red');
rainbow.setNumberRange(minValue, maxCalue);
return rainbow.colourAt(CountryValue);

You can add more colors to the gradient

Answer 2

Still not sure I understand, but it sounds like you want a quantile scale:

var x = d3.scale.quantile()
  .domain([0,500,1000,4000,5000,10000])
  .range(["#FF00FF", "#0000FF", "#00FF00", "#FFFF00", "#FF0000"]);

> x(400)
"#FF00FF"
> x(600)
"#0000FF"
> x(10001)
"#FF0000"