Getting started

This is a tool for building interactive economics graphs — the kind you drag, tweak with sliders, and put in front of a class. You describe a graph once as a small JSON spec, and the runtime draws it, wires up the sliders, and keeps everything in sync as students play with it.

There is no drawing by hand and no coordinates to fuss over. You say "linear demand with this intercept and slope, a marginal-cost line here, shade the profit rectangle," and it appears. Change a slider and every dependent thing — the equilibrium point, the shaded areas, the readouts — updates live.

Two ways to author

You never have to write JSON from scratch unless you want to.

• The visual builder (the Builder link up top) is a form. You add pieces from menus — a parameter, a curve, a shaded area, a slider — and fill in the fields. Only valid graphs come out, and a live preview updates as you type. Start here.
• The code editor (the Code editor link) shows the raw spec next to a live preview, with validation. Use it when you want to copy a spec, tweak something quickly, or paste one of the examples from the recipes.

Both share the same engine and the same validator, so a graph you start in one you can finish in the other.

Your first five minutes

1. Open the Builder and pick a sample from the dropdown — say Monopoly pricing. It loads with sliders already wired.
2. Drag the sliders. Watch the optimum, the shaded surplus and deadweight-loss regions, and the sidebar numbers all move together.
3. Drag the red marginal-cost handle right on the graph. Dragging is just another way to change a parameter.
4. Change some text: give the graph a bigger title (the title size box in the meta section), or bump the font scale for projection.
5. Copy the JSON (the Copy JSON button) if you want to keep it, or open the Gallery and download any graph as a file.

Getting a graph into your class

Every graph in the Gallery is a single self-contained HTML file. Click a graph, then Download this graph — you get one file that opens in any browser with no internet connection and no dependencies. Drop it into Canvas, Moodle, or Blackboard as a file or an embedded page, put it on a slide, or email it to a student. It just works offline.

If you host the whole site (see the deployment notes in the repository), you also get a permanent URL for the gallery and a link per graph that you can share instead of a file.

How a spec is shaped

A spec is one JSON object. The pieces you will use most:

• params — the adjustable numbers. Give one a min and max and it becomes a slider.
• derived — values computed from the params by little formulas, e.g. an equilibrium quantity. These recompute automatically.
• axes and objects — the axes, and the list of things drawn (curves, lines, points, shaded areas, labels).
• sidebar — the sliders and the live text readouts beside the graph.

The recipes walk through building each of these from scratch, and the spec reference documents every field.