Mark McClure

Notebooks that illustrate ways to use MathJax

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

Purpose-built for displays of data