How to display graph with MathJax in jupyter notebook?

Question

I am trying to create a jupyter-notebook with a graphical depiction of a neural network. For starters, I am trying to display a simple network that evaluates a boolean NOT operator.

I am using the %%dot cell magic that is documented at https://metakernel.readthedocs.io/en/latest/source/README.html?v=20190725125340#id13 and I have a code cell in my notebook with the following contents:

%%dot
digraph NOT {
  rankdir = LR
  node [shape="circle"]
  x0 [label="+1"]
  x1 [label="$x_1$"]
  h [shape="plain"]
  y1 [color="coral" label=""]
  x0 -> y1 [label="10"]
  x1 -> y1 [label="-20"]
  y1 -> h [label="g()"]
}

This is rendered into an SVG that is displayed as the output of the code cell. However, for the label on the x1 node I've used $x_1$, which I'd like to render as $x_1$ (presumably by MathJax, as it does in the Markdown cells). Unfortunately, I just get a blank node with no label, like this:

Any idea what I can do to fix this?

Answer 1

I ended up creating a new magic, based on the %dot magic, called %dotMJ. It works by looking for <text> objects in the SVG (corresponding to labels in GV), checking if they are LaTeX code (start/end with $), and if so converting them to a <div> and wrapping with a <foreignObject>. This allows MathJax to "see" the LaTeX code and convert it appropriately for display.

Source is available at: https://gitlab.com/jello/ML-Notebooks/blob/master/dotMJ_magic.py