Created
September 26, 2013 17:10
-
-
Save kristiankime/6717271 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>MathJax+D3 Dynamic Equations Test Page</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script> | |
// =========== General functions ======== | |
// Returns the first Jax element with the given id, mostly to save typing | |
function jax(id) { | |
return MathJax.Hub.getAllJax(id)[0]; | |
} | |
// Update a Jax element with a string in TeX format | |
// Modified from http://docs.mathjax.org/en/latest/typeset.html | |
function updateJaxTeX(jax, TeX) { | |
MathJax.Hub.queue.Push([ "Text", jax, "\\displaystyle{" + TeX + "}" ]); | |
} | |
// Returns the MathML associated with a Jax element | |
// Modified from https://groups.google.com/forum/#!msg/mathjax-users/unL8IjcrTto/DjHpH4BbPRcJ | |
function toMathML(jax, callback) { | |
var mml; | |
try { | |
// Try to produce the MathML. If an asynchronous action occurs, a reset error is thrown. Otherwise we got the MathML and call the user's callback passing the MathML. | |
mml = jax.root.toMathML(""); | |
} catch (err) { | |
if (!err.restart) { | |
// This means an actual error occurred, nothing we can do but re-throw. | |
throw err; | |
} | |
// This means files are still loading. In this case we call this routine again after waiting for the the asynchronous action to finish. | |
return MathJax.Callback.After([ toMathML, jax, callback ], err.restart); | |
} | |
// Pass the MathML to the user's callback | |
MathJax.Callback(callback)(mml); | |
} | |
function arrayIndicies(array) { | |
var ret = []; | |
for ( var key in array) { | |
if (key !== 'length' && array.hasOwnProperty(key)) { | |
ret.push(key); | |
} | |
} | |
return ret; | |
} | |
function identityIsData(data) { | |
return data; | |
} | |
// ================ Page Specific ============== | |
var savedEquations = []; | |
function savedEquationId(data, index) { | |
return "savedEquation" + index; | |
} | |
function savedEquationHtml(data, index) { | |
return '<script type="math/mml">' + data + '</script>'; | |
} | |
function saveEquation() { | |
toMathML(jax("MathOutput"), function(mathML) { | |
savedEquations.push(mathML); | |
}); | |
} | |
function cleanJaxFrom(containerElement) { | |
var scriptTag = containerElement.getElementsByTagName("script")[0]; | |
scriptTag.removeAttribute("id"); | |
delete scriptTag.MathJax; | |
} | |
function generateEquationHTML() { | |
var select = d3.select("#savedEquations").selectAll("div").data(arrayIndicies(savedEquations), identityIsData).each(function(d, i) { | |
cleanJaxFrom(this); | |
}); | |
select.enter().append("div").attr("id", savedEquationId).html(function(d, i) { | |
return savedEquationHtml(savedEquations[d], i); | |
}); | |
select.exit().remove(); | |
} | |
function generateEquationJaxByTypeset() { | |
for ( var i = 0; i < savedEquations.length; i++) { | |
MathJax.Hub.Queue([ "Typeset", MathJax.Hub, document.getElementById("savedEquation" + i) ]); | |
} | |
} | |
function updateEquations() { | |
saveEquation(); | |
generateEquationHTML(); | |
generateEquationJaxByTypeset(); | |
} | |
</script> | |
</head> | |
<body> | |
<p> | |
Type some \(\rm\TeX\) code and press RETURN: <br> <input id="MathInput" size="80" onchange="updateJaxTeX(jax('MathOutput'), this.value)" /> | |
</p> | |
<div id="box"> | |
You typed:<br> | |
<div id="MathOutput">$${}$$</div> | |
<br> | |
<button type="button" onclick="updateEquations();">Update Equations</button> | |
</div> | |
<p>Saved Equations:</p> | |
<div id="savedEquations"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment