Quick Start
The Desmos 3D Graphing Calculator provides a beautiful and simple way to embed 3D graphs into your web page or web app. Here's how to create an interactive 3D graph in just a few lines of code:
Step 1: include our secure JavaScript file:
<script src="https://www.desmos.com/api/v1.11/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>Step 2: add an an element to the page:
<div id="calculator" style="width: 600px; height: 400px;"></div>Step 3: add the following lines of JavaScript:
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.Calculator3D(elt);
</script>Step 4: Enjoy:
See examples/3d.html to see this example live.
Preparing for production: In this example, we used the demo API key dcb31709b452b1cf9dc26972add0fda6. For production use, you should obtain your own API key and supply it as the apiKey parameter in the script url in step 1.
Creating a New Instance
The basic structure of the API is an embeddable Calculator3D instance, which is the page element that will display your calculator.
Constructor
constructor Calculator3D(element, [options])
Creates a Calculator3D object to control the embedded instance in the DOM element specified by element.
It is possible to create a Calculator3D instance outside of the DOM and call methods on the returned
object, but the view will not be created until element is inserted into the DOM.
Note: for every instantiated Calculator3D instance, we run a small set of computations on every frame
in order to reliably detect when the instance is added to the DOM, removed from it, show, hidden, or resized.
This could, theoretically, have performance and/or memory implications, although the effects are miniscule unless you instantiate many Calculator3D instances.
If you want to manage sizing yourself, you can instantiate with the API option {autosize: false}. In this case, you must call .resize() anytime that the instance is added to the DOM, removed from the DOM, or resized.
When you're done using a calculator instance, call .destroy() to remove all of our listeners.
Example:
var elt = document.getElementById('my-calculator');
var calculator = Desmos.Calculator3D(elt);
// Create a calculator instance outside of the DOM
var elt2 = document.createElement('div');
var calculator2 = Desmos.Calculator3D(elt2);
// Insert the element into the DOM and create the calculator view
document.body.appendChild(elt2);
// Destroy the root element and detach the calculator view
elt2.remove();
calculator2.destroy();The object returned is a Desmos.Calculator3D object.
options is an optional object that specifies features that should be included or excluded. Any option available
to a Desmos.GraphingCalculator instance, documented here, may also be passed
to a Desmos.Calculator3D instance.
Calculator.destroy()
Free listeners and resources used by the calculator view.
Saving and Loading
Calculator.getState()
Returns a JavaScript object representing the current state of the calculator. Used in conjunction with Calculator.setState to save and restore states.
The return value of Calculator.getState may be serialized to a string using JSON.stringify.
Warning: States should be treated as opaque values. Manipulating states directly may produce a result that cannot be loaded by Calculator.setState.
Calculator.setState(obj, [options])
Reset to a state previously saved using Calculator.getState. options is an optional object that controls the behavior of when setting the state.
| Name | Type | Default | Description |
|---|---|---|---|
| allowUndo | Boolean | false |
Preserve the undo/redo history. |
Calculator.setBlank([options])
Reset to a blank state. If an options object is present, the allowUndo property serves the same function as it does in Calculator.setState.
Examples:
// Save the current state of a calculator instance
var state = calculator.getState();
// Use jQuery to post a state to your server for permanent storage
$.post('/myendpoint', JSON.stringify(state));
// Load a state into a calculator instance
calculator.setState(state);
// Reset to a blank state
calculator.setBlank();Calculator.setDefaultState(obj)
Add a default state and a reset button to allow the user to reset the calculator to the default state after they have changed it.
Examples:
// Save the current state
var newDefaultState = calculator.getState();
// Set a new default state to match the current state
calculator.setDefaultState(newDefaultState);More Documentation
The 3D calculator is built on top of the graphing calculator and shares its underlying API. For more information about this shared API surface, see the graphing calculator API documentation here.
API Keys
In order to include the Desmos API in your page, you must supply an API key as a url parameter, like this:
<script src="https://www.desmos.com/api/v1.11/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>The demonstration API key, dcb31709b452b1cf9dc26972add0fda6, is provided for use during development. If you plan to use the API in production, you should contact us by e-mailing info@desmos.com to obtain your own API key.