When you start a blog site, the first thing you think about is how the math will look.

Well OK, if you are anything like me, the first thing you think about is how the math will look. And the graphs. And the plots. And possibly how difficult it will be to create them — after all, if it’s a lot of work, you might forego illustrating your points with easy-to-grasp figures or enlighteningly set formulas and go with a less-than-optimal textual representation instead.

One of the first things I did after installing WordPress was sifting through the plug-ins looking for one that would make this task simple and fun. There are a few dealing with LaTeX (WP LaTeX being the obvious choice), though graphing and plotting are represented less. No matter, at least is working …

But what’s that, a rasterized image ? Isn’t there a better way that’ll also display beautifully when scaled up or displayed on different-sized screens ? Vector graphics are nothing new, and Scalable Vector Graphics is an open standard published by the W3C quite some time ago; by now, browsers will surely support it …

(imagine me carrying on this train of thought for a bit and, as if by magic, arriving at …)

So WP Render is a plug-in based on WP LaTeX doing the same thing, but also generating the equivalent SVG images from your favorite formulas and understanding GraphViz and GnuPlot as well as

What does that mean, really ? Allow me to illustrate :

LaTeX

Symbols too small ? Too much math on too little screen-space ? Just zoom in ! (CTRL+Mousewheel should work on most browsers). The formula is the one WP LaTeX uses as a test, as well. Depending on how decent your browser-support for SVG is, the title/alternate image of the above is the LaTeX-expression used to render it; if your browser does not support SVG at all (Internet Explorer, for instance, lives in backward country), you should see a rasterized PNG image instead.

[latex size=3]
\displaystyle
P_\nu^{-\mu}(z)=
\frac{\left(z^2-1\right)^{\frac{\mu}{2}}}
      {2^\mu \sqrt{\pi}\Gamma\left(\mu+\frac{1}{2}\right)}
\int_{-1}^1
\frac{\left(1-t^2\right)^{\mu -\frac{1}{2}}}
      {\left(z+t\sqrt{z^2-1}\right)^{\mu-\nu}}
dt
[/latex]

That’s how it is done in WordPress.

GraphViz

With out of the way, let’s look at GraphViz :

(taken straight from the GraphViz examples)

[dot class="aligncenter"]
digraph G {
 
	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}
 
	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;
 
	start [shape=Mdiamond];
	end [shape=Msquare];
}
[/dot]

You can specify a different layout algorithm with the k-Parameter to [dot] (possible choices are 'dot', 'circo', 'neato', 'twopi', 'fdp', and 'sfdp').

gnuplot

gnuplot supports all manner of plots, charts, etc. — and now so does WordPress.

(taken from the gnuplot demo)

[gnuplot]
set border 4095 front linetype -1 linewidth 1.000
set format cb "%.01t*10^{%T}"
set samples 40, 40
set isosamples 40, 40
set hidden3d offset 1 trianglepattern 3 undefined 1 altdiagonal bentover
set ticslevel 0
set title "color lines: 'splot sin(y)/(y) with lines palette'" 
set xlabel "X" 
set xrange [ -10.0000 : 10.0000 ] noreverse nowriteback
set ylabel "Y" 
set yrange [ -10.0000 : 10.0000 ] noreverse nowriteback
splot sin(y)/(y) w lines palette
[/gnuplot]

The [gnuplot]-code can take several parameters; sizex and sizey are self-explanatory. font and fontsize should be, too (the latter is in points); which ones work depends on which are installed on your system and the way gnuplot has been compiled. dynamic can is a boolean value; if it’s set, the SVG output will lack a viewBox, which will allow viewers to fill as much space as is available (in WordPress’ case that’s the width of the post column, usually).

Further examples

Equation Array

Let be the set of prime numbers
Let be the set of prime factors of
Let be the set of divisors of

1. follows from the uniqueness of the factorization
2. follows from
3. follows from definition 1.4.2
4. follows from the definition of as
   a subset of coprime to

(from an exercise in a cryptography course)

Let $latex \mathbb{P}$ be the set of prime numbers<br />
Let $latex P_{a}$ be the set of prime factors of $latex a$<br />
Let $latex T_{a}$ be the set of divisors of $latex a$
 
[latex nomathmode=true]  
\begin{eqnarray*}
 p \in \mathbb{P} & \stackrel{(1)}{\Rightarrow} &P_{p^{e}} = \{p\} \\
& \stackrel {(2)}{\Rightarrow} & \forall n \in \{0,1,2,\ldots, p^{e}\}:
  ggT (p^{e},n)=1, if : p\not|n \\
& \Rightarrow & \forall m \in M = \{0,1,2,\ldots, p^{(e-1)} \} :
  (m\cdot p) \not\in \mathbb{Z}^*_{p^e} \\
& \Rightarrow & \forall m \in M = \{n\cdot p | n\in \{0,1,2,\ldots,p^{e-1}\}\}:
   m \not\in \mathbb{Z}_{p^{e}}^{*} \wedge \\
& & \forall i \in N = \{j | j \in \{0,1,2,\ldots, p^{e}\} \wedge j\not\in{M}\}:
      i\in \mathbb{Z}_{p^e}^* \wedge \\
& & M \cup N = \mathbb{Z}_{p^e} \wedge M \cap N = \varnothing \\
& \Rightarrow & \Phi(p^{e}) \stackrel{(3)}= |\mathbb{Z}^*_{p^e}| 
  \stackrel{(4)}= |\mathbb{Z}_{p^e}|-|M| = (p^e+1)-(p^{(e-1)}+1)  \\
& & = p^e+1-p^{(e-1)}-1 = p^{e} - p^{(e-1)} = 
  p\cdot p^{(e-1)} - p^{(e-1)} = (p-1)p^{(e-1)}
\end{eqnarray*}
[/latex]
<ol>
<li>follows from the uniqueness of the factorization</li>
<li>follows from $latex \forall n\in T_{a} \exists q\in P_{a}:q|n$</li>
<li>follows from definition 1.4.2</li>
<li>follows from the definition of $latex \mathbb{Z}^*_m$ as 
  a subset of $latex \mathbb{Z}_m$ coprime to $latex m$</li>
</ol>

Function plot

[gnuplot]
plot [-pi/2:pi] cos(x),-(sin(x) > sin(x+1) ? sin(x) : sin(x+1))
[/gnuplot]

Simple, undirected graph

[dot]
 graph test123 {
               a -- b -- c;
               a -- {x y};
               x -- c;
               x -- y;
       }
[/dot]