-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Created a notebook with instructions for integrating the Desmos Graph…
…ing Calculator API via a widget, using JavaScript in a notebook cell.
- Loading branch information
Tom Malone
committed
Jul 31, 2016
1 parent
8c69a98
commit d16d424
Showing
2 changed files
with
224 additions
and
0 deletions.
There are no files selected for viewing
112 changes: 112 additions & 0 deletions
112
.ipynb_checkpoints/Desmos_API_Integration-checkpoint.ipynb
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| { | ||
| "cells": [ | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Desmos API Integration\n", | ||
| "\n", | ||
| "How to embed a Desmos graphing calculator element within your IPython Notebook." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### JavaScript Magic\n", | ||
| "\n", | ||
| "First, you must tell the IPython kernel that the code within a cell is going to be JavaScript.\n", | ||
| "\n", | ||
| "You do that by beginning the cell with this:\n", | ||
| "<code>%%javascript</code>\n", | ||
| "\n", | ||
| "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.\n", | ||
| "\n", | ||
| "<blockquote style=\"font-size: 1.2rem; color: #bbb;\"><em><strong>NOTE:</strong> Ideally, it would be possible to embed a Desmos graphing calculator widget in <u>every</u> 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.</em></blockquote>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Embed Desmos API\n", | ||
| "\n", | ||
| "Next, you must add a <script> element with the Desmos API JavaScript code: <code><pre><script src="https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script></pre><code>\n", | ||
| "\n", | ||
| "<code>\n", | ||
| "var desmosScript = document.createElement(\"script\");\n", | ||
| "desmosScript.setAttribute(\"src\", \"https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6\");\n", | ||
| "\n", | ||
| "// Append the script to the <body> tag\n", | ||
| "document.body.appendChild(desmosScript);\n", | ||
| "\n", | ||
| "// Create the element which will contain the Desmos Calculator widget\n", | ||
| "var calcDiv = document.createElement(\"div\");\n", | ||
| "\n", | ||
| "// Set the calculator element's style, id, etc.\n", | ||
| "calcDiv.setAttribute(\"id\", \"desmos-calculator\");\n", | ||
| "\n", | ||
| "// NOTE: these settings for width and margin will cause the calculator\n", | ||
| "// widget to match the notebook cells in width and alignment\n", | ||
| "calcDiv.style.width = \"806px\";\n", | ||
| "calcDiv.style.marginLeft = \"auto\";\n", | ||
| "calcDiv.style.marginRight = \"auto\";\n", | ||
| "\n", | ||
| "// Append the element to the notebook container\n", | ||
| "var nbContainer = document.getElementById(\"notebook-container\");\n", | ||
| "nbContainer.appendChild(calcDiv);\n", | ||
| "\n", | ||
| "// Initialize the Desmos Calculator widget\n", | ||
| "var desmosCalculator = Desmos.Calculator(calcDiv);\n", | ||
| "</code>\n", | ||
| "\n", | ||
| "<blockquote style=\"font-size: 1.2rem; color: #bbb;\"><em><strong>NOTE:</strong> Notice in the script tag above that the URL in the src attribute includes an <code>apiKey</code> query parameter. This is the <strong>demo API key.</strong> You should obtain your own API key from Desmos. Don't use they demo API key, or the Desmos team may block your access.</em></blockquote>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Using the Desmos Calculator Widget\n", | ||
| "\n", | ||
| "#### Set an Expression\n", | ||
| "\n", | ||
| "Using the following code, you can set an expression and graph it in the widget:\n", | ||
| "\n", | ||
| "<code>\n", | ||
| "desmosCalculator.setExpression({id:'graph1', latex:'y=x^2'});\n", | ||
| "</code>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "metadata": { | ||
| "collapsed": true | ||
| }, | ||
| "outputs": [], | ||
| "source": [] | ||
| } | ||
| ], | ||
| "metadata": { | ||
| "kernelspec": { | ||
| "display_name": "Python 2", | ||
| "language": "python", | ||
| "name": "python2" | ||
| }, | ||
| "language_info": { | ||
| "codemirror_mode": { | ||
| "name": "ipython", | ||
| "version": 2 | ||
| }, | ||
| "file_extension": ".py", | ||
| "mimetype": "text/x-python", | ||
| "name": "python", | ||
| "nbconvert_exporter": "python", | ||
| "pygments_lexer": "ipython2", | ||
| "version": "2.7.10" | ||
| } | ||
| }, | ||
| "nbformat": 4, | ||
| "nbformat_minor": 0 | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| { | ||
| "cells": [ | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Desmos API Integration\n", | ||
| "\n", | ||
| "How to embed a Desmos graphing calculator element within your IPython Notebook." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### JavaScript Magic\n", | ||
| "\n", | ||
| "First, you must tell the IPython kernel that the code within a cell is going to be JavaScript.\n", | ||
| "\n", | ||
| "You do that by beginning the cell with this:\n", | ||
| "<code>%%javascript</code>\n", | ||
| "\n", | ||
| "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.\n", | ||
| "\n", | ||
| "<blockquote style=\"font-size: 1.2rem; color: #bbb;\"><em><strong>NOTE:</strong> Ideally, it would be possible to embed a Desmos graphing calculator widget in <u>every</u> 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.</em></blockquote>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Embed Desmos API\n", | ||
| "\n", | ||
| "Next, you must add a <script> element with the Desmos API JavaScript code: <code><pre><script src="https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script></pre><code>\n", | ||
| "\n", | ||
| "<code>\n", | ||
| "var desmosScript = document.createElement(\"script\");\n", | ||
| "desmosScript.setAttribute(\"src\", \"https://www.desmos.com/api/v0.7/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6\");\n", | ||
| "\n", | ||
| "// Append the script to the <body> tag\n", | ||
| "document.body.appendChild(desmosScript);\n", | ||
| "\n", | ||
| "// Create the element which will contain the Desmos Calculator widget\n", | ||
| "var calcDiv = document.createElement(\"div\");\n", | ||
| "\n", | ||
| "// Set the calculator element's style, id, etc.\n", | ||
| "calcDiv.setAttribute(\"id\", \"desmos-calculator\");\n", | ||
| "\n", | ||
| "// NOTE: these settings for width and margin will cause the calculator\n", | ||
| "// widget to match the notebook cells in width and alignment\n", | ||
| "calcDiv.style.width = \"806px\";\n", | ||
| "calcDiv.style.marginLeft = \"auto\";\n", | ||
| "calcDiv.style.marginRight = \"auto\";\n", | ||
| "\n", | ||
| "// Append the element to the notebook container\n", | ||
| "var nbContainer = document.getElementById(\"notebook-container\");\n", | ||
| "nbContainer.appendChild(calcDiv);\n", | ||
| "\n", | ||
| "// Initialize the Desmos Calculator widget\n", | ||
| "var desmosCalculator = Desmos.Calculator(calcDiv);\n", | ||
| "</code>\n", | ||
| "\n", | ||
| "<blockquote style=\"font-size: 1.2rem; color: #bbb;\"><em><strong>NOTE:</strong> Notice in the script tag above that the URL in the src attribute includes an <code>apiKey</code> query parameter. This is the <strong>demo API key.</strong> You should obtain your own API key from Desmos. Don't use they demo API key, or the Desmos team may block your access.</em></blockquote>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Using the Desmos Calculator Widget\n", | ||
| "\n", | ||
| "#### Set an Expression\n", | ||
| "\n", | ||
| "Using the following code, you can set an expression and graph it in the widget:\n", | ||
| "\n", | ||
| "<code>\n", | ||
| "desmosCalculator.setExpression({id:'graph1', latex:'y=x^2'});\n", | ||
| "</code>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "metadata": { | ||
| "collapsed": true | ||
| }, | ||
| "outputs": [], | ||
| "source": [] | ||
| } | ||
| ], | ||
| "metadata": { | ||
| "kernelspec": { | ||
| "display_name": "Python 2", | ||
| "language": "python", | ||
| "name": "python2" | ||
| }, | ||
| "language_info": { | ||
| "codemirror_mode": { | ||
| "name": "ipython", | ||
| "version": 2 | ||
| }, | ||
| "file_extension": ".py", | ||
| "mimetype": "text/x-python", | ||
| "name": "python", | ||
| "nbconvert_exporter": "python", | ||
| "pygments_lexer": "ipython2", | ||
| "version": "2.7.10" | ||
| } | ||
| }, | ||
| "nbformat": 4, | ||
| "nbformat_minor": 0 | ||
| } |