Notebooks that illustrate ways to use MathJax

Mark McClure

Overlay KaTeX on top of an SVG

Plot for mathematicians

D3-Graphviz with MathJax

Fractal typesetting

SVG and MathJax 3

MathJax

Math

Find inspiration and techniques to create beautiful and appropriate charts with Observable Plot. This collection highlights best practices and real use cases.

Observable

Plot Examples

try x: { domain: [0, 1.2], ticks: [0.25, 0.75], tickFormat: ".2s" }

Ah - the placement is correctly specified but the format function rounds the input. And using tickFormat we can obviously set the ticks to be anything we want

Thanks!

The new-ish axis marks should give you what you need. Try this: Plot.ruleX([0]), Plot.ruleY([0]), Plot.axisX({y: 0}), Plot.axisY({x: 0}).

Mike Bostock

Yep - just hadn't quite got round to it. Thanks for the nudge!

If you like, you can now inject TeX into the Plot using a function mark:

() => svg`<g transform="translate(${w / 3} ${h / 2}) scale(3)">
  ${MathJax.tex2svg(String.raw`A = \frac{1}{4} \pi \, r^2`).querySelector("svg")}
</g>`

Thanks Mike! When I first saw this, I spent a while trying to figure out the "function mark"; I thought it might be something like Plot.function(...). It finally dawned on me that a function that returns an SVG *is* a mark. :)

Just used it for the first time for a class demo: https://observablehq.com/d/b15bc41eebac681f