One of the primary reasons I created KGJS was to have ability to present multiple linked graphs. (This is a critical element of economic analysis, for example when you want to see how a change in one market affects other markets.) Layouts are pre-set combinations of graphs in different configurations.
The simplest layout is the OneGraph layout, which is what is used for most of the examples in this documentation. It takes a single graph child, which has the definition of the one graph in it. This has an aspect ratio of 1:1, meaning it’s a square:
Because you sometimes don’t need to use all the vertical space afforded by a square graph, there’s also a OneWideGraph layout which has a 2:1 aspect ratio. If you want to have the graph appear to have the same dimensions on both axes, it’s a good idea to double the number of ticks on the horizontal axis and make the scale twice as long:
The TwoVerticalGraphs layout also has an aspect ratio of 1:1, but each of the graphs in it (defined by the children topGraph and bottomGraph) has an aspect ratio of 2:1:
A lot of the time when you use this layout, the horizontal axes have the same value, so we don’t label the top graph’s x-axis. Another trick is to take advantage of the knowledge that the graph will be a rectangle, and adjust the axis values so that the tick marks represent the same values:
The TwoHorizontalGraphs layout is has an aspect ratio of 2:1, and places two square graphs (defined by leftGraph and rightGraph) side-by-side:
There are also layouts for larger numbers of graphs:
leftGraph, middleGraph, and rightGraph. Here’s an example.bigGraph, topGraph, and bottomGraph. Here’s an example.topLeftGraph, topRightGraph, bottomLeftGraph, and bottomRightGraph. I’ve never actually used this one! :)
These all do basically what you would imagine.There are some additional specialty layouts for economics, which handle things like game matrices and Edgeworth Boxes.
It’s also possible to create a custom layout by positioning a graph exactly where you want to; if you’re interested in finding out more, or requesting additional layouts be constructed, drop me a line.