Skip to content
Vega templates

Density ridges

Joy-plot style stacked density curves.

Template previewVega
Rendering…

Make it your own.

{
  "$schema":"https://vega.github.io/schema/vega/v5.json",
  "width":420,"height":260,"padding":10,
  "data":[{"name":"raw","values":[
    {"g":"A","v":2.1},{"g":"A","v":2.4},{"g":"A","v":2.6},{"g":"A","v":3.0},{"g":"A","v":3.2},{"g":"A","v":3.4},{"g":"A","v":3.8},
    {"g":"B","v":3.4},{"g":"B","v":3.8},{"g":"B","v":4.0},{"g":"B","v":4.3},{"g":"B","v":4.5},{"g":"B","v":4.8},
    {"g":"C","v":4.6},{"g":"C","v":5.0},{"g":"C","v":5.3},{"g":"C","v":5.5},{"g":"C","v":5.8}
  ],"transform":[{"type":"kde","field":"v","groupby":["g"],"bandwidth":0.4,"as":["x","y"]}]}],
  "scales":[
    {"name":"x","type":"linear","range":"width","domain":[1,7]},
    {"name":"y","type":"band","range":"height","domain":["A","B","C"]},
    {"name":"color","type":"ordinal","range":{"scheme":"set2"},"domain":["A","B","C"]}
  ],
  "axes":[{"orient":"bottom","scale":"x"},{"orient":"left","scale":"y"}],
  "marks":[{
    "type":"group","from":{"facet":{"data":"raw","name":"f","groupby":"g"}},
    "marks":[{
      "type":"area","from":{"data":"f"},
      "encode":{"enter":{
        "x":{"scale":"x","field":"x"},
        "y":{"signal":"scale('y',parent.g)+50 - datum.y*60"},
        "y2":{"signal":"scale('y',parent.g)+50"},
        "fill":{"scale":"color","field":"g"},"fillOpacity":{"value":0.7},
        "stroke":{"scale":"color","field":"g"}
      }}
    }]
  }]
}