Расчет цветовых диапазонов в гексе

Question

Я пытаюсь реализовать глобальную тепловую карту того, где находятся наши международные проекты в мире. Я использую JQVmap для этой цели.

$(document).ready(function() {
  var data = {
    "af": 16.63,
    "al": 11.58,
    "dz": 158.97,
    "ca": 146.9
  };
  
  var max = 0,
      min = Number.MAX_VALUE,
      cc,
      startColor = [200, 238, 255],
      endColor = [0, 100, 145],
      colors = {},
      hex;
  
  // Find max and min values
  for(cc in data) {
    if(parseFloat(data[cc]) > max) {
      max = parseFloat(data[cc]);
    }
    
    if(parseFloat(data[cc]) < min) {
      min = parseFloat(data[cc]);
    }
  }
  
  // Set colors according to data values
  for(cc in data) {
    if(data[cc] > 0) {
      colors[cc] = '#';
      
      for(var i = 0; i < 3; i++) {
        hex = Math.round(
          startColor[i] + (endColor[i] - startColor[i]) * (data[cc] / (max - min))
        ).toString(16);
        
        if(hex.length == 1) {
          hex = '0' + hex;
        }
        
        colors[cc] += (hex.length == 1 ? '0' : '') + hex;
      }
    }
  }
  
  $("#vmap").vectorMap({
    map: 'world_en',
    backgroundColor: '#f5f5f5',
    borderColor: '#888888',
    borderOpacity: 0.25,
    borderWidth: 1,
    colors: colors,
    enableZoom: true,
    hoverColor: false,
    hoverOpacity: 0.7,
    normalizeFunction: 'linear',
    selectedColor: false,
    selectedRegions: null,
    showTooltip: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script>
<div id="vmap" style="width: 100%; height: 400px;"></div>

Как вы заметите, есть страна, заполненная черным цветом, и в результате получается гекс #-105988, Мое единственное предположение, что проблема заключается в формуле

startColor[i] + (endColor[i] - startColor[i]) * (data[cc] / (max - min))

Я попытался сгруппировать первую операцию, заключив их в скобки, но это не решило мою проблему. Я также пытался использовать Math.abs((endColor[i] - startColor[i])) но это также не исправило это.

Честно говоря, это не моя формула, и я не знаю, как рассчитать различные оттенки, чтобы обозначить плотность значения, поэтому я не знаю, как настроить формулу. Формула была взята непосредственно из официальной документации библиотеки.

Answer 1

Очевидно, мне не нужно рассчитывать цвета самостоятельно, поскольку библиотека уже может сделать это за вас - просто предоставьте данные.

$(document).ready(function() {
  var data = {
    "af": 16.63,
    "al": 11.58,
    "dz": 158.97,
    "ca": 146.9
  };
  
  $("#vmap").vectorMap({
    map: 'world_en',
    backgroundColor: '#f5f5f5',
    borderColor: '#888888',
    borderOpacity: 0.25,
    borderWidth: 1,
    // colors: colors,
    enableZoom: true,
    hoverColor: false,
    hoverOpacity: 0.7,
    normalizeFunction: 'linear',
    scaleColors: ['#C8EEFF', '#006491'],
    selectedColor: false,
    selectedRegions: null,
    showTooltip: true,
    values: data
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script>
<div id="vmap" style="width: 100%; height: 400px;"></div>