Draw chart in Python using Trinket

Write and run code in any browser on any device

5 min readJul 28, 2023

Interactive widgets, that teachers use to teach hands-on during class, can be made using Trinket and then can be embedded to any webpage, which turns the device that students have from barriers to mediums for teaching (TechFaster, 2014). It lets the students write program in any browser, which makes it ideal for teaching Python on Chromebook, since there is no software to install and all the students need to do is create a free account (Love, 2020). It can also be considered as a browser-based coding environment that is designed for teaching and coursework (Ganguli, 2018). There is also an approach to use it together with Moodle, the first is for all the work and feedback, while the last is for assignments (Evans, 2023). Steps how to use Trinket to draw chart in Python will be given here.

Sign up

Visit https://trinket.io/ to begin to try it.

Click the green button with caption Sign Up for Your Free Account.

Pick the first way, red button with caption Sign in with Google.

Choose available Google account or create a new one.

You will find some pre-defined codes to modify. Click Sign Out to leave the service.

Run a code

Click Run button ▶.

Then you get the result. Use screenshot feature to save the graph as image.

Previous graph is created using following lines of code.

# ref https://datatofish.com/line-chart-python-matplotlib/
import matplotlib.pyplot as plt
   
x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [2, 3, 4, 7, 8, 9, 3, 2, 1, 1, 20]

plt.plot(x, y, color='red', marker='o')
plt.xlabel('x')
plt.ylabel('y')
plt.show()

Click Save button to save modification.

Wait for the saving process.

Create new Trinket

Find icon indicating your username, which in this case is dudung. Simply click it.

Choose New Trinket → Python3.

Modify previous code and click ▶ button.

Wait for the progress.

Now you get the result. It is an open right parabola. Lines of the code that define the data are

N = 11
y = [*range(0, N+1)]
x = [(i-5)*(i-5) for i in y]

which can be modified into

N = 11
y = [*range(0, N+1)]
x = [-(i-5)*(i-5) for i in y]

to get an open left parabola. This is a x = x(y) parabolic curves, which can be open left or right parabolic curves. The more usual and familiar form is y = y(x) parabolic curves, which can be open up or down parabolic curves.

Notice that the quadratic equation representing parabolic curve, in this case y = y(x), is in the factored form

where x1 and x2 are the roots, values of x that make y equals to zero. Beside the factored form, a quadratic equation can also written in standard and vertex forms (Alan, 2015).

Share the code

You can share the code to allow the other to learn.

Click the button ▼ and choose Link.

Now you can share the code with others, https://trinket.io/python3/23ad5c8992. Let’s open in a incognito window.

Copy and paste the link in the address bar and press Enter.

Wait for the process.

Now others will be able to modify and run the code.

Notice that using incognito window you are logging as two different user (Austin, 2010). First is you as you have logged in on Trinket with you Google account and the other is an unknown and unlogged user. Other way is to use different browser (Hoffman, 2012). Why it is necessary to test it with multiple users, is to see what the other users would see and to assure that you give them what you have planned.

Challenges

Make a linear function with negative gradient.
Explore the other forms of quadratic equation and use it draw parabolic curves.
Make an open up and open down parabolic curves.
Make a circular path. Use parametric equation in t with x and y are cosine and since functions.
Create a random x and y data and plot it with marker and line.
Plot two curces and put a marker on the intersection(s) of the curves.