Search code examples
vega-litevega

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

In Vega-lite I have created a Histogram with binned Data, is it possible to lay a density line over it. Getting data from elastic database index.

{
  "$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"}
    ]
  }
}

Plot looks line enter image description here

  1. Can we plot a density line on the histogram
  2. X-axis showing value only at the start, other values are not showing or hiding, How to display the axis values (even at 45deg)

like enter image description here Sample data will look like (https://vega.github.io/vega-lite/examples/bar_binned_data.html)

enter image description here

Solution

  • To get the density line, you can use interpolate config in line mark and check different options. For example in the below sample I have applied natural interpolate. Also to show all the label points, first you can try providing labelAngle in x-axis's axis config if it works to show your labels properly or you can enable the label overlapping by providing labelOverlap to false. Below is the sample config or refer 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"}
      }
    }
  ]
}