From d16d42495836e18a18a826be85827c08634c7194 Mon Sep 17 00:00:00 2001 From: Tom Malone Date: Sat, 30 Jul 2016 20:10:57 -0400 Subject: [PATCH] Created a notebook with instructions for integrating the Desmos Graphing Calculator API via a widget, using JavaScript in a notebook cell. --- .../Desmos_API_Integration-checkpoint.ipynb | 112 ++++++++++++++++++ Desmos_API_Integration.ipynb | 112 ++++++++++++++++++ 2 files changed, 224 insertions(+) create mode 100644 .ipynb_checkpoints/Desmos_API_Integration-checkpoint.ipynb create mode 100644 Desmos_API_Integration.ipynb diff --git a/.ipynb_checkpoints/Desmos_API_Integration-checkpoint.ipynb b/.ipynb_checkpoints/Desmos_API_Integration-checkpoint.ipynb new file mode 100644 index 0000000..7affac5 --- /dev/null +++ b/.ipynb_checkpoints/Desmos_API_Integration-checkpoint.ipynb @@ -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", + "%%javascript\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", + "
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.
" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Embed Desmos API\n", + "\n", + "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>
\n", + "\n", + "\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", + "\n", + "\n", + "
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.
" + ] + }, + { + "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", + "\n", + "desmosCalculator.setExpression({id:'graph1', latex:'y=x^2'});\n", + "" + ] + }, + { + "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 +} diff --git a/Desmos_API_Integration.ipynb b/Desmos_API_Integration.ipynb new file mode 100644 index 0000000..7affac5 --- /dev/null +++ b/Desmos_API_Integration.ipynb @@ -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", + "%%javascript\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", + "
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.
" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Embed Desmos API\n", + "\n", + "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>
\n", + "\n", + "\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", + "\n", + "\n", + "
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.
" + ] + }, + { + "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", + "\n", + "desmosCalculator.setExpression({id:'graph1', latex:'y=x^2'});\n", + "" + ] + }, + { + "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 +}