Skip to content
Vega templates

Streamgraph

Smooth stacked area of categories over time.

Template previewVega
Rendering…

Make it your own.

{
  "$schema":"https://vega.github.io/schema/vega/v5.json",
  "width":420,"height":220,"padding":5,
  "data":[{"name":"table","values":[
    {"t":1,"c":"A","v":10},{"t":1,"c":"B","v":12},{"t":1,"c":"C","v":8},
    {"t":2,"c":"A","v":14},{"t":2,"c":"B","v":10},{"t":2,"c":"C","v":11},
    {"t":3,"c":"A","v":18},{"t":3,"c":"B","v":8},{"t":3,"c":"C","v":15},
    {"t":4,"c":"A","v":22},{"t":4,"c":"B","v":6},{"t":4,"c":"C","v":18},
    {"t":5,"c":"A","v":26},{"t":5,"c":"B","v":4},{"t":5,"c":"C","v":24}
  ],"transform":[{"type":"stack","groupby":["t"],"sort":{"field":"c"},"field":"v","offset":"center"}]}],
  "scales":[
    {"name":"x","type":"linear","range":"width","domain":{"data":"table","field":"t"}},
    {"name":"y","type":"linear","range":"height","domain":{"data":"table","fields":["y0","y1"]}},
    {"name":"color","type":"ordinal","range":{"scheme":"tableau10"},"domain":{"data":"table","field":"c"}}
  ],
  "marks":[{
    "type":"group","from":{"facet":{"data":"table","name":"f","groupby":"c"}},
    "marks":[{
      "type":"area","from":{"data":"f"},
      "encode":{"enter":{"x":{"scale":"x","field":"t"},"y":{"scale":"y","field":"y0"},"y2":{"scale":"y","field":"y1"},"interpolate":{"value":"basis"},"fill":{"scale":"color","field":"c"}}}
    }]
  }]
}