javascript - 可视化值(value)的出现

Question

我有一个数据集(~ 100mb)，希望通过首先可视化不同 JSON 值的数量来更好地理解数据。

我首先使用 ctx.arc(); 绘制圆弧，并增加每次出现值的半径。

switch(data[i].value) {
        case "X":
            ctx.beginPath();
            ctx.arc(x, 100, i+1, 0, 2*Math.PI);
            ctx.fillStyle = "MidnightBlue";
            ctx.fill();
            break;
}

弧线已绘制，但太大并且超出了我的视口(viewport)。所以看起来a)我犯了一个错误或者b)该值出现的次数太多，这导致圆圈变得巨大。我该如何解决这个问题？

Answer 1

可视化大值

有两种方法可以可视化具有大值的数据。

您没有提供有关数据结构的任何线索，所以大多数情况下我只是猜测数据。

缩放和平移。

如果值的分布大致呈线性，您可以缩放和移动值以适合所需的范围。

为此，您需要一次考虑所有数据点并找到最小值和最大值。

var min = Infinity;  // set the start min and max
var max = -Infinity;
for (var i = 0; i < data.length; i++){
     if (data[i].value === "X") {
         // I dont know where you got the x from so leave that to you
         // x is the value needed to graph
         min = Math.min(min, x);
         max = Math.max(max, x);
     }
}

检查每个值并确定最小值和最大值后，您需要计算要显示信息的大小。

const displayMaxRadius = Math.min(canvas.width, canvas.height) / 2;
const displayMinRadius = 10;

然后，为了显示每个值，您可以使用最小值和最大值缩放到标准化范围，使每个值都在 0 到 1(含)范围内。适合显示最小值和最大值的比例

for (var i = 0; i < data.length; i ++) {
     if (data[i].value === "X") {
         // I dont know where you got the x from so leave that to you
         // x is the value needed to graph
         var norm = (x - min) / (max - min); // normalize the value
         var displaySize = norm * (displayMaxRadius - displayMinRadius) + displayMinRadius;
         ctx.beginPath();
         ctx.arc(displaySize , 100, i + 1, 0, 2 * Math.PI);
         ctx.fillStyle = "MidnightBlue";
         ctx.fill();             

对数数据

有时，值的范围分布不均匀，范围非常大，某些范围内存在大量数据。使用上述方法是可行的，但对于大多数数据来说，它会被缩放，从而由于值范围过大而丢失个体差异。

要处理创建对数图的问题，只需在找到最小最大范围之前找到值的根即可。您可以使用平方根或任何其他值。

使用Math.pow(x,1/r)，其中r是您想要的根，r = 2是平方根，r = 3是立方根，依此类推

var root = 2; // sqrt root
var min = Infinity;  // set the start min and max
var max = -Infinity;
for (var i = 0; i < data.length; i++) {
     if (data[i].value === "X") {
         // I dont know where you got the x from so leave that to you
         // x is the value needed to graph
         var rval = Math.pow(x, root);
         min = Math.min(min, rval);
         max = Math.max(max, rval);
     }
}
for (var i = 0; i < data.length; i++) {
     if (data[i].value === "X") {
         // I dont know where you got the x from so leave that to you
         // x is the value needed to graph
         var rval = Math.pow(x, root);
         var norm = (rval - min) / (max - min); // normalize the value
         var displaySize = norm * (displayMaxRadius - displayMinRadius) + displayMinRadius;
         ctx.beginPath();
         ctx.arc(displaySize , 100, i + 1, 0, 2*Math.PI);
         ctx.fillStyle = "MidnightBlue";
         ctx.fill();