如何以对数方式可视化一系列值

How to visualise a range of values logarithmically?

本文关键字：可视化 一系列 方式      更新时间：2023-09-26

我正在为城市可视化气泡，如果城市具有更大的价值，则更大。如:

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;
}

我已经研究了如何使对数函数在0.5和1的约束下看起来"对数":

Math.log10(x / 0.8 + 1) / 3 + 0.5，其中x在0到24.5之间。

这纯粹是一个对我来说看起来不错的函数，你可以在早期得到非常动态的数字，尽管在较大的数字中可以看到明显的增长。

请随意摆弄数字，这是非常主观的。

接下来你需要在0到24.5的范围内适应你的100~15000范围。我会简单地做一个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 :)
}

修改函数中的值，直到找到最适合自己的曲线。

相关文章：