如何在 vega-lite 中的直方图（来自合并数据）上放置密度分布线

Question

在 Vega-lite 中，我创建了一个带有分箱数据的直方图，是否可以在其上放置一条密度线。从弹性数据库索引获取数据。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.json",
  "data": {
    "url" : {
        "index": "artefact_data",
        "body": {
          "size":10000,
          "_source": ["bin_start", "bin_end", "count"]        
        }
      }  
      "format": {"property": "hits.hits"},
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "_source.bin_start",
      "bin": {"binned": true, "step": 2}
    },
    "x2": {"field": "_source.bin_end"},
    "y": {
      "field": "_source.count",
      "type": "quantitative"    
    },
    "color": {"value": "green"},
    "opacity": {"value": 0.6},
    "tooltip": [
      {"field": "_source.count", "type": "quantitative", "title":"Count"}
    ]
  }
}

剧情长相线

我们可以在直方图上画一条密度线吗
X轴只在开始时显示值，其他值不显示或隐藏，如何显示轴值（即使在45度）

喜欢示例数据将类似于 (https://vega.github.io/vega-lite/examples/bar_binned_data.html)

Answer 1

要获得密度线，您可以在 mark 行中使用 interpolate 配置并检查不同的选项。例如，在下面的示例中，我应用了 natural 插值。另外要显示所有标签点，首先您可以尝试在 x 轴的 axis 配置中提供 labelAngle 如果它可以正确显示您的标签，或者您可以通过提供 labelOverlap 启用标签重叠至 false。下面是示例配置或参考 editor.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"bin_start": 8, "bin_end": 10, "count": 7},
      {"bin_start": 10, "bin_end": 12, "count": 29},
      {"bin_start": 12, "bin_end": 14, "count": 71},
      {"bin_start": 14, "bin_end": 16, "count": 127},
      {"bin_start": 16, "bin_end": 18, "count": 194},
      {"bin_start": 18, "bin_end": 20, "count": 54},
      {"bin_start": 20, "bin_end": 22, "count": 47},
      {"bin_start": 22, "bin_end": 24, "count": 35},
      {"bin_start": 24, "bin_end": 26, "count": 27}
    ]
  },
  "width": 600,
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "bin_start", "bin": {"binned": true, "step": 2}},
        "x2": {"field": "bin_end"},
        "y": {"field": "count", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "stroke": "green", "interpolate": "natural"},
      "encoding": {
        "x": {
          "field": "bin_start",
          "type": "quantitative",
          "bin": {"binned": true, "step": 2},
          "axis": {"labelAngle": 45, "labelOverlap": true}
        },
        "x2": {"field": "bin_end"},
        "y": {"field": "count", "type": "quantitative"}
      }
    }
  ]
}

如何在 vega-lite 中的直方图（来自合并数据）上放置密度分布线

How to lay a Density Distribution line over a Histogram (from binned Data) in vega-lite

vega

vega-lite