Skip to content
Vega-Lite templates

Supply & Demand

Classic supply / demand curves with equilibrium point.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
  "data":{"values":[
    {"q":0,"p":10,"k":"Demand"},{"q":10,"p":7,"k":"Demand"},{"q":20,"p":4,"k":"Demand"},{"q":30,"p":1,"k":"Demand"},
    {"q":0,"p":1,"k":"Supply"},{"q":10,"p":3,"k":"Supply"},{"q":20,"p":5,"k":"Supply"},{"q":30,"p":7,"k":"Supply"},
    {"q":15,"p":5,"k":"Equilibrium"}
  ]},
  "layer":[
    {"transform":[{"filter":"datum.k !== 'Equilibrium'"}],
     "mark":{"type":"line","strokeWidth":3},
     "encoding":{
       "x":{"field":"q","type":"quantitative","title":"Quantity"},
       "y":{"field":"p","type":"quantitative","title":"Price"},
       "color":{"field":"k","type":"nominal"}
     }
    },
    {"transform":[{"filter":"datum.k === 'Equilibrium'"}],
     "mark":{"type":"point","filled":true,"size":150,"color":"#dc2626"},
     "encoding":{
       "x":{"field":"q","type":"quantitative"},
       "y":{"field":"p","type":"quantitative"}
     }
    }
  ],
  "width":420,"height":280
}