Embedding Existing Graphs into a Webpage

[Dave Yrueta]

Hi All --

I'm brand new to the world of API's, so please forgive my ignorance in advance if the answer to my question is painfully obvious!

I have built a set of course notes in Latex for the Calculus sequence that contains links to nearly hundreds of Desmos graphs (thank you Desmos!) .  Recently, I began thinking about moving these notes over to a Web based documentation platform, and was wondering about the work involved in embedding the graphs into the document, as opposed to just exposing a link to the graph (which is what I do now.)

For example, here's a link to a graph that animates right Riemann sums:https://www.desmos.com/calculator/wydhf2ifyo

To embed this graph into a web page, would I need to recode it using API commands from scratch?  Or there a way to move it over "as is?" 

Thank you! 

[ja...@desmos.com]

Great question.

The first thing I'd consider here is embedding the Desmos graphs as iframes. Many publishing platforms allow this kind of embed, and you wouldn't need to use an API at all. To do this, you can open your graph on desmos.com, use the "share arrow" icon in the top right of the calculator, and choose "embed". This will show you some iframe code that you can paste into another web page. Note that some publishing platforms place restrictions on exactly how iframes can be embedded, so you might have to learn about those details for your platform.

The biggest thing to be aware of there is that that kind of embed will only show the graph, but not the equation list. There will be a link at the bottom right of the graph to edit the graph on desmos.com that allows seeing the equations and editing them.

If you want students to be able to see/edit the equation list for a graph on your site , the API is the best way to go. You won't need to recreate the graphs. See this recent message for two possibilities (and some caveats) for getting data from a saved graph into the API:

https://groups.google.com/g/desmos-api-discuss/c/13puecwnx5U/m/IlxdIB0KCAAJ

One final comment is that loading _lots_ of separate calculators on one page, using either iframes or the API, is pretty resource intensive for students' devices. If you were thinking of putting, say, a dozen calculators on a single page, I'd probably instead go with putting screenshots on the page that link to saved states on desmos.com, so that students can interact with the calculators one by one. That will be friendlier to low powered devices.

Best,

Jason

[Sina Azizi]

In regards to using the API, which Jason linked to in his reply, I made a short video explaining how to execute it, just in case you decide to embed it using their API. 

Video walkthrough

1. Step one get the code after Desmos.com/calculator/{code}

2. Go to terminal and paste(no quotation): "curl -H 'accept: application/json' https://www.desmos.com/calculator/{insert code}"

3. Copy the response, go to https://codebeautify.org/jsonviewer and paste it 

Hopefully this is helpful 

[Dave Yrueta]

Thank you Team Desmos for your clear, thoughtful and considerate response to my newbie question.  You people are the best.