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

【问题标题】：How to visualise a range of values logarithmically?如何以对数方式可视化一系列值？
【发布时间】：2015-10-02 08:37:50
【问题描述】：

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

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

【问题讨论】：

标题与描述不符，更新一下
在可视化气泡时，不是可视化它们的实际值，而是可视化它们的对数
可以使用多少像素？画布的尺寸是多少？你有多少个城市？圆圈大小算法取决于您目前拥有的定位算法，因此如果您也可以分享它会很棒。
@svs 我在上面的代码中添加了
@JohnDoe 等等你的圈子在哪里？我期待(x, y) 中心。我不明白min/maxBulletSize，min/maxSquare是什么意思，你能解释一下你现在的想法吗？对您的代码进行语义化。

标签： javascript algorithm logarithm

【解决方案1】：

我已经研究了如何使对数函数在 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 :)
}

修改函数中的值，直到找到适合您的完美曲线。

【讨论】：