Как визуализировать диапазон значений логарифмически?

Question

Я визуализую пузыри для городов, больше, если город имеет большую ценность. Например:

London: 14500 
New York: 100 
Tokyo: 1100 

Значения в диапазоне от ~ 100-15000

У меня возникли проблемы с созданием функции, которая будет возвращать разумные значения, так что 100 значение пузырьки не слишком малы. Единственный способ, которым я мог думать, чтобы сделать это, чтобы установить минимальный размер, например:

if (size < 5) { size = 5 } 

Однако, это приводит к тому, города с значениями ~ 100, очень похожи на города, со значениями ~ 1000. Я хотел бы, чтобы значения приблизительно 0-15000 возвращались как значения от 0,5 до 1 (или что-то подобное). Как это будет сделано?

Вот что я до сих пор, но, как я сказал, что это вызывает значения 100 и значения 1000 до оба под минимальным значением:

var minBulletSize = 7.5; 
var maxBulletSize = 20; 
var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI; 
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI; 

// create circle for each location 
for (var i = 0; i < mapData.length; i++) { 
    var dataItem = mapData[i]; 
    var value = dataItem.value; 
    // calculate size of a bubble 
    var square = (value/1000 - minBulletSize)/(maxBulletSize - minBulletSize) * (maxSquare - minSquare) + minSquare; 
    if (square < minSquare) { 
     square = minSquare; 
    } 
    if (square > maxSquare) { 
     square = maxSquare; 
    } 
    var size = Math.sqrt(square/(Math.PI * 2)); 
    var id = dataItem.code; 
} 

Answer 1

Я принял взглянуть на то, как сделать логарифмическая чтобы смотреть «логарифмически» в пределах ограничений 0,5 и 1:

Math.log10(x/0.8 + 1)/3 + 0.5 где x находится между 0 и 24,5.

Это чисто функция, которая кажется мне хорошей, когда вы можете получить очень динамические числа раньше, хотя явный рост можно увидеть в больших количествах.

Не стесняйтесь возиться с цифрами, это ОЧЕНЬ субъективно.

Далее вам нужно будет вписаться в ваш диапазон 100 ~ 15000 в пределах от 0 до 24,5. Я бы просто сделал x = (x - 100)/608.16, чтобы ваш диапазон находился в пределах от 0 до 24,5.

var minBulletSize = 7.5; 
var maxBulletSize = 20; 
var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI; 
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI; 

// create circle for each location 
for (var i = 0; i < mapData.length; i++) { 
    var dataItem = mapData[i]; 
    var value = dataItem.value; 
    // assuming value is in between 100 and 15000 
    value = (value - 100)/608.16; 
    value = Math.log10(value/0.8 + 1)/3.0 + 0.5; 
    // value will be in between 0.5 and 1 on a logarithmic scale. 
    // Do what you want with it :) 
} 

Измените значения в пределах функций, пока не найдете идеальную кривую для вас.