The Design and Aesthetic of MJSPlot Graphs

The obvious initial style and design choice is that the axes labels are on the inside of the axes. This may come as a surprise to some, but offers a simple design metaphor and enables the strong design principle of alignment to apply while avoiding trapped whitespace.

The fully exterior axis positions provide a metaphor of looking through a window. Major ticks come inwards like a multi-pane window. The placement of labels inside the axes can also be thought of as having the axes outside the labels. The labels are at the edge of the canvas, pushed to the far left and bottom but the solid line of the axis is not drawn closer to the data, as is traditional, but further away. This makes a larger space for the data. The usual y-axis is on the left side but right-aligned leaving a gap between the text and the canvas boundary. This is simply solved by left aligning the left positioned text to axis, leaving the spare whitespace to enter into the space for the data.

Things avoided by MJSPlot:

• There is no rotated text. Head tilting is not an acceptable reading requirement.
• Trapped whitespace on the left side between the left-alignment of the graph and the left axis.
• Bad scale increments. Only 1,2, and 5, for linear spaced scales are allowed. This enables easy mental interpolation between the ticks.

Benefits by inside-out axes:

• Larger area for data.
• Strong exterior alignment.
• Zero trapped whitespace.
• No rotated text.
• Window metaphor of the data view.