javascript - 抑制 d3plus 方框和晶须绘图中的极端异常值

Question

我正在尝试在 d3plus 上创建带有 mustache 的箱线图，以比较我数据库中“此”提供者和“所有”提供者之间的指标。我已经在预处理阶段从非常大的数组中计算出 5 统计摘要，并将它们传递到 data 变量中。如果您运行附加的代码片段(从 d3plus website example 修改而来)，​​您可以看到代码和绘图的样子。然而，实际上，“全部”类别中有一些极端异常值，在我的代码中作为注释行提供:“最大”为 663373.22(“全部”)，“最小”为 -18427.39(同样，“全部” ").

我看到有一个mute method我可以使用 .y，但我不确定如何让它与函数一起工作。

是否有一种相当直接的方法来“抑制”这些极端异常值的绘制(如果允许，这会将两个箱形图折叠成扁平线)，或者任何高于(或低于)某些极端异常值IQR 的倍数？

<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>

<div id="viz"></div>

<script>
  var data = [
    {"provider": "This", "name":"min", "value": -1055.79},
    {"provider": "This", "name":"q1", "value": -172.819},
    {"provider": "This", "name":"med", "value": -46.795},
    {"provider": "This", "name":"q3", "value": 8.378},
    {"provider": "This", "name":"max", "value": 1033.15},
    {"provider": "All", "name":"min", "value": -1000},
    {"provider": "All", "name":"q1", "value": -111.60999999999999},
    {"provider": "All", "name":"med", "value": -13.92},
    {"provider": "All", "name":"q3", "value": 124.22},
    {"provider": "All", "name":"max", "value": 1000}
  ]
  //663373.22, -18427.39
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("box")
    .id("name")
    .x("provider")
    .y("value")
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw()
</script>

Answer 1

根据我对文档的了解，mute 用作对象键，其中值可以是字符串、函数或数组。因此，如果您想静音所有名称为 q1 的数据点，您可以执行 .y({value:'value',mute:'q1'})。

至于解决方案，您需要一个函数来确定异常值。我找到并编辑了一个函数来返回可接受的值范围(IQR * 倍数)，您可以根据需要修改 multiple 变量。然后使用一个简单的函数 isOutlier，检查传入的值是否超出范围。

<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>

<div id="viz"></div>

<script>
  var data = [
    {"provider": "This", "name":"min", "value": -1055.79},
    {"provider": "This", "name":"q1", "value": -172.819},
    {"provider": "This", "name":"med", "value": -46.795},
    {"provider": "This", "name":"q3", "value": 8.378},
    {"provider": "This", "name":"max", "value": 1033.15},
    {"provider": "All", "name":"min", "value": -1000},
    {"provider": "All", "name":"q1", "value": -111.60999999999999},
    {"provider": "All", "name":"med", "value": -13.92},
    {"provider": "All", "name":"q3", "value": 124.22},
    {"provider": "All", "name":"max", "value": 1000}
  ]
 
  var outlierRange = outlierRange(data.map(d=>d.value))
  var isOutlier = val =>  (val < outlierRange[0] || val > outlierRange[1])

  //663373.22, -18427.39
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("box")
    .id("name")
    .x("provider")
    .y({value:'value', mute: isOutlier })
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw()
  
function outlierRange(someArray) {

  if(someArray.length < 4)
return someArray;

  let values, q1, q3, iqr, maxValue, minValue, multiple = 0.5;

  values = someArray.slice().sort( (a, b) => a - b);//copy array fast and sort

  if((values.length / 4) % 1 === 0){//find quartiles
q1 = 1/2 * (values[(values.length / 4)] + values[(values.length / 4) + 1]);
q3 = 1/2 * (values[(values.length * (3 / 4))] + values[(values.length * (3 / 4)) + 1]);
  } else {
q1 = values[Math.floor(values.length / 4 + 1)];
q3 = values[Math.ceil(values.length * (3 / 4) + 1)];
  }

  iqr = q3 - q1;
  maxValue = q3 + iqr * multiple;
  minValue = q1 - iqr * multiple;

  return [minValue, maxValue]
}




</script>