First, you must tell the IPython kernel that the code within a cell is going to be JavaScript.
You do that by beginning the cell with this:
%%javascript
In other words, in the cell in which you're going to write the JavaScript code which will embed, configure, and activate the Desmos graphing calculator widget, begin it with the above IPython magic code.
NOTE: Ideally, it would be possible to embed a Desmos graphing calculator widget in every IPython Notebook on this server. And really, it is supposed to be possible. See [NotebookApp.extra_static_paths](http://jupyter-notebook.readthedocs.io/en/latest/config.html) config option. However, it's been difficult to get it to work, and other people have had difficulty also. So, until you have more time to troubleshoot it, you must manually embed a Desmos widget when you want one, using the method described in this notebook.
Next, you must add a <script> element with the Desmos API JavaScript code: <script src="https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
var desmosScript = document.createElement("script");
desmosScript.setAttribute("src", "https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6");
// Append the script to the <body> tag document.body.appendChild(desmosScript);
// Create the element which will contain the Desmos Calculator widget var calcDiv = document.createElement("div");
// Set the calculator element's style, id, etc. calcDiv.setAttribute("id", "desmos-calculator");
// NOTE: these settings for width and margin will cause the calculator // widget to match the notebook cells in width and alignment calcDiv.style.width = "806px"; calcDiv.style.marginLeft = "auto"; calcDiv.style.marginRight = "auto";
// Append the element to the notebook container var nbContainer = document.getElementById("notebook-container"); nbContainer.appendChild(calcDiv);
// Initialize the Desmos Calculator widget var desmosCalculator = Desmos.Calculator(calcDiv); </code>
NOTE: Notice in the script tag above that the URL in the src attribute includes an apiKey query parameter. This is the demo API key. You should obtain your own API key from Desmos. Don't use they demo API key, or the Desmos team may block your access.
In [ ]: