d3.js/LaTeX translation

Question

I'm producing a scientific data visualisation in d3.js, and hence being from the scientific community I am a "LaTeX-er" but very new to d3.js...

I want to include the following in my visualisation (if anyone is familiar with LaTeX):

Which equates to:

$\text{SFR}$=10.10$\text{M}_{\odot}$ ${\text{ yr}}^{-1}$

How would I go about translating it for rendering for a d3.js viz?

Answer 1

Your LaTeX have couple errors. Corrected version:

\text{SFR}_{[\textup{O\ II}]}=10.10\text{M}_{\odot}\ {\text{ yr}}^{-1}

Then, you can use svg:foreignObject constructor:

//The SVG Container
var svgContainer = d3.select("body").append("svg")
     .attr({"width": 400, "height": 400});

//foreignObject
var latex_raw = "\\text{SFR}_{[\\textup{O\\ II}]}=10.10\\text{M}_{\\odot}\\ {\\text{ yr}}^{-1}";
var latex_render_url = "http://latex.codecogs.com/gif.latex?";
var latex_query = encodeURI(latex_raw);
var latex = svgContainer.append("foreignObject")
     .attr({
         "x": 100,
         "y": 60,
         "width": 400,
         "height": 200,
         "requiredFeatures": "http://www.w3.org/TR/SVG11/feature#Extensibility"})
     .append("xhtml:body").attr({
         "margin": 0,
         "padding": 0,
         "width": 400,
         "height": 200})
     .append("img").attr({
         "src": latex_render_url + latex_query});

NOTICE:

In javascript strings you have to double all the \ of your LaTeX code!

DEMO: http://jsfiddle.net/4ksjek94/1/