Yet Another JDesmos Demo

In a recent article, we announced the availability of JDesmos, a small library for embedding Desmos Graphs in Jupyter. This article is only a modest reworking of a JDesmos sample we published to the GitHub repository to serve as further documentation.

Usage:

pip install jdesmos

Shown below is a simple usage example.

Note: Apparently, GitHub disables JavaScript display output, so the graph will not display there. It will be available if you run install JDesmos and run this in a local Jupyter environment.

# We can also install it within Jupyter
!pip install jdesmos --quiet

from jdesmos import Desmos
desmos = Desmos()
desmos.add_latex('x^2 + 2')
desmos.add_latex('y=2x + 1')
desmos.add_expression({"latex": "(1,3)", "label": "(1,3)", "showLabel": True})
desmos.display()

API

JDesmos has a very lightweight API.

  • __init__: By default, the constructor, JDesmos() creates a desmos object using the Desmos API “demo” api key (this can be overriden).

  • add_latex: This method adds a LaTeX expression to the Desmos graph. This string argument is the LaTeX equivalent of what would enter as a line in the Desmos online calculator.

  • add_expression: This method allows more flexibility than add_latex. The expression argument is a json string (or Python dict which will be translated into a json string). See the setExpression method of the Desmos API documentation for more information on the format of this object.

  • display: After calling add_expression or add_latex as needed to create populate the graph, call display to show the graph in the browser. Note that even though the graph was set up programatically, lines can be changed or added interactively in the resulting graph as you would in the Desmos graphing calculator. Note, however, that re-running the original code will delete any lines that were added interactively.

Translating an add_expression example

Here is an example from the desmos API documentation. Below this, we translate the example into the equivalent JDesmos calls.

//Define a variable m.  Doesn't graph anything.
calculator.setExpression({ id: 'm', latex: 'm=2' });}|

//Draw a red line with slope of m through the origin.
//Because m = 2, this line will be of slope 2.
calculator.setExpression({ id: 'line1', latex: 'y=mx', color: '#0000ff' });

//Updating the value of m will change the slope of the line to 3
grapher.setExpression({ id: 'm', latex: 'm=3' });

//Inequality to shade a circle at the origin
calculator.setExpression({ id: 'circle1', latex: 'x^2 + y^2 < 1' });

//Restrict the slider for the m variable to the integers from 1 to 10
calculator.setExpression({
  id: 'm',
  sliderBounds: { min: 1, max: 10, step: 1 }
});

desmos = Desmos()

# Define a variable m.  Doesn't graph anything.
desmos.add_expression("{ id: 'm', latex: 'm=2' }")

# Draw a red line with slope of m through the origin.
# Because m = 2, this line will be of slope 2.
desmos.add_expression("{ id: 'line1', latex: 'y=mx', color: '#ff0000' }");

# Updating the value of m will change the slope of the line to 3
desmos.add_expression("{ id: 'm', latex: 'm=3' }")

# Inequality to shade a circle at the origin
desmos.add_expression("{ id: 'circle1', latex: 'x^2 + y^2 < 1' }");

#Restrict the slider for the m variable to the integers from 1 to 10
desmos.add_expression("{id: 'm', sliderBounds: { min: 1, max: 10, step: 1 }}")

# Call display to show the results
desmos.display()

Using JDesmos With SymPy

Because of SymPy’s excellent support for LaTeX, it’s quite simple to use SymPy’s powerful CAS (Computer Algebra System) features and display the results in JDesmos. In the example below, we’ll take the derivative of a function and draw a tangent line to a point on the curve, a classic Calculus 1 problem with some SymPy flavor.

from sympy import symbols, diff, latex, Eq

# Typical SymPy setup
x,y = symbols('x y')

# A simple function x squared
f_of_x = x**2

# Its derivative, 2x
y_prime = diff(f_of_x)

# We know that (2,4) is on the curve, but here we use SymPy to arrive at that.
x_coord = 2

# Figure out y_coordinate for this point based on 
# substituting into derivative (i.e., the slope function)
y_coord = y_prime.subs(x, x_coord)

# Construct the point on the graph and 
point = (x_coord, y_coord)
assert point == (2,4)

# Begin graphing
desmos = Desmos()

# Add the parabola
desmos.add_latex(latex(f_of_x))

# Add the point where tangent line will the curve
desmos.add_expression({"latex": "{0}".format(point), "label": "{0}".format(point), "showLabel": True, "color": "#000000"})

# Manually calculate the function for the slope of the tangent line at a point
# using the point-slope formula, y1 - y2 = m(x1 - x2)
# y - 4 = 4(x - 2)
# y = 4x -8 + 4
# y = 4x -4

# Express the result in SymPy
slope_equation = Eq(y, 4*x - 4)

# Add the tangent line to our graph
desmos.add_latex(latex(slope_equation))

desmos.display()