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

绘制弧线但是大而且超出了我的视口。所以似乎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;

然后显示每个值，使用min和max缩放到标准化范围，使每个值在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();

Answer 2

我自己找到了一个问题的答案。我能做的是用模数创建一个网格/矩形。

var x = (i % 115) * 1; 
var y = Math.floor(i / 115) * 1; 

ctx.fillStyle = "MidnightBlue"; 
ctx.fillRect(x, y, 1, 1);

正如您所看到的，我在美国拥有各州的关键/价值对。为了可视化数据集中每个状态的出现，我想用模数绘制网格。数字115是13450的根。但13450是（例如）美国所有农场的数量。现在我想要想象PA中的农场......我怎么能这样做？

可视化价值的发生

2 个答案:

可视化大值

缩放和翻译。

对数数据