Recipes

Short, complete examples. Paste any of these into the Code editor to see it run, then change the numbers. Each builds on the last.

1. A demand and supply cross

Two lines and the equilibrium where they meet. The equilibrium is a derived value, so it moves when you drag the sliders.

{
  "version": "0.1",
  "title": "Market equilibrium",
  "params": [
    { "name": "a", "label": "Demand intercept", "value": 100, "min": 60, "max": 120, "step": 5 },
    { "name": "b", "label": "Demand slope", "value": 1, "min": 0.5, "max": 2, "step": 0.1 },
    { "name": "c", "label": "Supply intercept", "value": 20, "min": 0, "max": 50, "step": 5 },
    { "name": "d", "label": "Supply slope", "value": 1, "min": 0.5, "max": 2, "step": 0.1 }
  ],
  "derived": {
    "qStar": "(a - c) / (b + d)",
    "pStar": "a - b*qStar"
  },
  "axes": {
    "x": { "label": "Quantity", "min": 0, "max": 120 },
    "y": { "label": "Price", "min": 0, "max": 120 }
  },
  "objects": [
    { "type": "line", "point": [0, "a"], "point2": ["a/b", 0], "color": "demand", "label": { "text": "Demand", "x": 70 } },
    { "type": "line", "point": [0, "c"], "point2": ["(120-c)/d", 120], "color": "supply", "label": { "text": "Supply", "x": 78 } },
    { "type": "point", "x": "qStar", "y": "pStar", "color": "equilibrium", "r": 5, "droplines": { "x": "q^*", "y": "p^*" } }
  ],
  "sidebar": {
    "controls": [{ "title": "Market", "sliders": [
      { "param": "a" }, { "param": "b" }, { "param": "c" }, { "param": "d" }
    ], "divs": [
      { "html": "Equilibrium: $q^* = ${round(qStar,1)}$, $p^* = ${round(pStar,1)}$." }
    ] }]
  }
}

The demand line is given by two points, [0, a] (the price intercept) and [a/b, 0] (the quantity intercept). The point's droplines drop dashed guides to each axis and label them. The sidebar div prints the live equilibrium — ${...} interpolates a value and $...$ renders the math.

2. Shade the surplus

Add two area objects to the recipe above. An area fills between a top and a bottom edge (each an expression in x) over an x-range.

{ "type": "area", "top": "a - b*x", "bottom": "pStar", "xFrom": 0, "xTo": "qStar", "color": "surplus", "opacity": 0.16 },
{ "type": "area", "top": "pStar", "bottom": "c + d*x", "xFrom": 0, "xTo": "qStar", "color": "profit", "opacity": 0.16 }

The first shades consumer surplus (between demand and the price, up to the equilibrium quantity); the second shades producer surplus (between the price and supply). Put area objects before the lines in the objects list so the lines draw on top.

3. Make a point draggable

Give a point a draggable block naming the parameter it controls and the direction. Dragging the point on the graph then moves that slider.

{ "type": "point", "x": 110, "y": "c", "color": "cost", "r": 5,
  "draggable": { "param": "c", "axis": "y" }, "hint": "drag" }

This is a handle sitting at the right edge on a marginal-cost line at height c; dragging it up and down changes c. Use "axis": "x" for horizontal dragging. For a handle whose position isn't the parameter value directly, add an expression that maps the dragged coordinate (available as drag) to the parameter.

4. A reactive verdict

Sidebar text can appear conditionally. Give a div a show expression and it is hidden whenever that expression is false.

"divs": [
  { "html": "Demand exceeds supply — price will rise.", "show": "qStar > 0 and pStar > c" },
  { "html": "<b>No trade:</b> supply sits above demand.", "show": "a <= c" }
]

This is how the cobweb graphs show which stability regime you are in, and how the price-discrimination graph switches its explanation between regimes.

5. A 2×2 game

Games use game instead of axes/objects. Give two players with their strategies and a payoff grid; the runtime marks best responses and rings the Nash equilibria.

{
  "version": "0.1",
  "game": {
    "title": "Prisoner's dilemma",
    "players": [
      { "name": "Player 1", "strategies": ["Cooperate", "Defect"] },
      { "name": "Player 2", "strategies": ["Cooperate", "Defect"] }
    ],
    "payoffs": [
      [[3, 3], [0, 5]],
      [[5, 0], [1, 1]]
    ],
    "showBestResponses": true,
    "showNash": true
  }
}

payoffs[i][j] is the pair of payoffs when player 1 plays strategy i and player 2 plays j. Add "iesds": true for a step-through elimination of dominated strategies, or "mixed": true (on a 2×2) for the mixed-strategy diagram.

Where to go next

Every graph in the gallery is a worked example you can open in the code editor and take apart. The spec reference is the complete list of every field and what it does.