JSPlotly and GSPlotly at School

To illustrate the potential use of JSPlotly for elementary and high school education, here are some examples of simulations whose graphs are often found in textbooks and related content. To get the most out of each topic, try following the suggestions for parametric manipulation in each topic.


Instructions

1. Choose a topic;
2. Click on the corresponding graph;
3. Click on "Add Plot";
4. Use the mouse for interactivity and/or edit the code.

Reminder: the editor uses infinite undo/redo in the code (Ctrl+Z / Shift+Ctrl+Z)!


1 Mathematics

1.1 Context - Trigonometry (EM13MAT306, EM13MAT308, EM13MAT307)

The following simulation aims to facilitate the visualization of some concepts in trigonometry, sine, cosine, and tangent. The code allows you to use a drop-down menu for each trigonometric function, as well as a slider to change the frequency in radians.

Equation:

1. Sine function:

\[ y = \sin(\omega x) \]

2. Cosine function:

\[ y = \cos(\omega x) \]

3. Tangent function:

\[ y = \tan(\omega x) \]

Suggestion:

1. Select the sine, cosine, and tangent functions using the drop-down menu.
2. Try changing the frequency of the function using the slider.
3. Overlay a sine graph and a cosine graph to observe their differences.
4. Repeat the same for the tangent graph.

2 Financial Mathematics

2.1 Context - Compound Interest (EM13MAT402):

Also known as “interest on interest”, compound interest adds value to capital over time, resulting in the growth of the final amount.

Equation:

\[ M = C \cdot (1 + i)^t \]

Where,

  • M: final amount
  • C: initial capital
  • i: interest rate per period (in decimal)
  • t: number of periods (e.g., months)

Suggestion:

1. Vary the contract period, the monthly interest rate, or the initial amount.
2. Try combining the parameters in the variation.
3. Evaluate the visual difference between an investment and a loan by entering a positive initial capital value for the former and a negative value for the latter.
4. Observe the downward curve for a simulated loan with negative initial capital. The remaining values refer to the outstanding debt to pay off the loan.

3 Statistics

3.1 Context - Normal distribution curve (EM13MAT316, EM13MAT407, EM13MAT312)

Sampling and population are common topics for data observation in analytical procedures. Statistical distribution curves for this involve the t-Student, F-Snedecor, Chi-square, and normal distribution. The normal distribution curve reflects the statistical behavior for natural phenomena in a given data population.
The example aims to illustrate the use of the z transformation, the calculation of critical values, and the interpretation of the area under the curve in the study of normal distribution and statistical inference.

Equation

The density function of the normal (or Gaussian) distribution is given below?

\[ f(x) = \frac{1}{\sigma \sqrt{2\pi}} \, e^{ -\frac{(x - \mu)^2}{2\sigma^2} } \]

Where:

  • \(\mu\) = 0 (mean of the distribution);
  • \(\sigma\) = 1 (standard deviation);
  • x = continuous random variable; f = normal distribution density function
From the equation above, we can extract z, the value of the standardized random variable for zero mean and unit standard deviation, representing the value on the x-axis:

\[ z = \frac{x - \mu}{\sigma} \]

Suggestion:

1. Try changing the value of “p” and running the graph. This value represents the probability of observing, under the null hypothesis, a value as extreme or more extreme than the observed value — that is, it measures the evidence against the null hypothesis. In the graph, it represents the area under the normal curve in the critical regions, indicating the chance of the observed result occurring by pure chance.

4 Physics

4.1 Context - Elastic potential energy (EM13CNT102, EM13CNT202, EM13MAT402)

The deformation of an elastic material is directly proportional to the force exerted on it and limited to the properties of the material.

Equation

The behavior of an ideal spring is described by Hooke’s law below:

\[ F = -k*x \]

Where:

  • F = restoring force of the spring (N);
  • k = spring constant (N/m);
  • x = deformation (m).
On the other hand, the elastic potential energy involved is described by the following quadratic relationship:

\[ E = \frac{1}{2}*k*x^2 \]

Where:

  • E = elastic potential energy (J).

Suggestion:

1. Try changing the value of the sprin´s elastic constant to highlight its effect, relating it to stiffer or less stiff springs;
2. Change the spring´s deformation limits in the code´s "control structure" (e.g., "for (let x = -0.7)"), and observe the effect on the maximum potential energy;
3. Note that, due to the quadratic operation on the deformation value, the potential energy is always positive.

4.2 Context - Motion of bodies (EM13CNT102):

The following code illustrates the trajectory of an oblique launch with an angle adjustable by a slider, useful for exploring the concepts of kinematics.

Equation:

1. General equation

\[ y(x) = x \cdot \tan(\theta) - \frac{g}{2 v_0^2 \cos^2(\theta)} \cdot x^2 \]

Where:

  • y(x): height as a function of horizontal distance;
  • x: horizontal position (m);
  • \(\theta\): angle of launch relative to the horizontal (radians or degrees);
  • v0: initial velocity of the projectile (m/s);
  • g: acceleration due to gravity (9.8 m/s²\(^{2}\))

2. Total flight time:

\[ t_{\text{total}} = \frac{2 v_0 \sin(\theta)}{g} \]

3. Horizontal position over time

\[ x(t) = v_0 \cos(\theta) \cdot t \]

Suggestion:

1. Notice that there is a slider for initial angles in the simulation. Drag the slider to another angle and add the graph, comparing the effect of this modification.
2. Change the initial velocity in the code and observe the effect on the graph.
3. Simulate a "lunar condition" for the trajectory, with gravity around 1/6 that of Earth (~1.6 m/s²).

5 Chemistry

5.1 Context - Heat Capacity (EF09CI06, EM13CNT104, EM13CNT203)

The following simulation aims to observe the relationship between heat exchanged (Q), mass (m), heat capacity (c), and temperature variation (\(\Delta\)T).

Equation:

\[ Q = c \cdot m \cdot \Delta T \]

Suggestion:

1. Try varying the temperature initially, overlaying some graphs;
2. Also vary the mass in the code editor for comparison.

5.2 Context: Mixture of substances in an exothermic reaction - 3D graph (EF09CI02, EM13CNT103, EM13CNT103)

Simulations can be performed without necessarily involving a mathematical relationship, as in the experimental observation of two variables, such as time and concentration, simulating an exothermic chemical reaction. Here is an interactive example in 3D.
In this case, the equation used in the editor involves a smooth variation of temperature over time, using the sine function and an initial temperature (see the code).


Suggestion:

1. Try varying the temperature initially, overlaying some graphs;
2. Also vary the mass in the code editor for comparison.

6 Biology

6.1 Context - Population Growth Model with Lag Phase (EM13CNT102)

This model presents a logistic function that simulates population growth (e.g., microorganisms, cells), accompanied by a delay component. By varying the parameters in the editor, it is possible to estimate various population growth profiles.

Equation:

\[ N(t) = \frac{K}{1 + \left(\frac{K - N_0}{N_0}\right) \cdot e^{-r \cdot A(t) \cdot t}}, \quad \text{with } A(t) = \frac{1}{1 + e^{-k(t - t_0)}} \]

Where:

  • K = environmental carrying capacity;
  • N0 = initial population;
  • r = intrinsic growth rate;
  • A(t) = growth activation factor with delay (lag phase);
  • t0 = midpoint of transition between lag phase and log phase;
  • k = delay smoothing constant (set to 0.5 in the code)

Suggestion:

1. Try varying the parameters of the equation, combining some and comparing their effects on the graphs:
a. Carrying capacity;
b. Initial population;
c. Growth rate;
d. Delay (lag phase);

6.2 Context - Energy efficiency and the food chain (EF06CI02, EM13CNT202, EM13CNT203)

Here is an example to illustrate energy transfer between different trophic levels in a food chain. Although there is no mathematical function that describes it, the 10% rule of ecological efficiency between levels of the chain can be applied, resulting in a logarithmic transfer relationship.

Suggestions

1. Lindeman's rule, outlined in the reference above, establishes a variation of 5-20% energy efficiency in the ecosystem. So, try overlaying the curves with these rates;
2. If you want to observe the logarithmic relationship of energy transfer, add the command "type: 'log'," just below "title: 'Available energy (units)',".

7 Geography

7.1 Context: Map of Brazil and Capital Cities (EM13CHS101, EM13CHS202, EM13CHS301)

JSPlotly is not just about equations! With the Plotly.js library that composes it, you can also produce interactive maps, such as the simulation below.

Suggestion:

1. Try using the mouse scroll wheel and the "pan" icon on the top bar to interact with the map.

8 History

8.1 Context - Distribution of slaves in the Americas from 1500 to 1888 (EF08HI06, EM13CHS104, EM13CHS503):

This simulation presents an interactive bar chart for selecting a period from a drop-down menu, tangent to the estimated number of enslaved Africans landed in the main regions of the Americas. The data are rough estimates to illustrate the visualization potential of the application, although they serve as a starting point for more accurate educational discussions. Sources for consultation include Slave Voyages.


Suggestion:

1. Try switching between periods in the drop-down menu, comparing estimates of slave traffic;
2. Select a period, create the graph, select another period, and add another graph. This allows you to compare the number of slaves brought in by the double bars formed, and hover your mouse over each bar.

8.2 Context - Timeline of events in the Middle Ages (EM13CHS101, EM13CHS102)

Source: Encyclopedia.com

Suggestions:

1. Try changing events and periods in the code, and assign them to another period in human history.

9 Languages

9.1 Context - Slang spoken in Brazil from 1980 to 2020 (EF89LP19, EM13LGG102)

This simulation is intended to estimate the use of slang spoken in Brazil over the last 40 years. The representation is in a pie chart, and the selection by decade is in a drop-down menu.


1. You can use the mouse to hover over each bar to see the "tip" (hint) for that data point in the chart.

9.2 Context - Frequency of words in text (EM13LGG101, EM13LGG302, EM13LGG303)

Suggestion

1. Try replacing the code text with another;
2. Try varying the number of most frequent terms in the variable "const entradas" (optionally, also vary in the graph title, to make sense);
3. Compare a text in Portuguese with its translation into English or another language.

10 Diagrams and Flowcharts

The application also allows the creation of other interactive teaching objects, without the need to insert equations, such as diagrams and flowcharts. Examples follow.

10.1 Context: Diagram of the light and dark cycles of photosynthesis (EM13CNT101, EM13CNT103, EM13CNT201, EM13MAT405)

1. Try repositioning the inputs and outputs (e.g., Light, Glucose) by simply dragging them with the mouse.
2. Replace the terms within the boxes, or change other aspects of the diagram (color, fill, for example).

10.2 Context: Flowchart for the water cycle (EF06CI03, EF06CI04, EM13CNT103, EM13CNT202)

Suggestions:

1. As for the diagrams above, try changing the properties of the arrows and the terms and fields involved in the flowchart in the code;
2. Replace terms to form another flowchart;
3. Reposition the objects in the graphic area (fields, terms, arrows) using the mouse.

11 Arts

11.1 Context - Fractal composition (EM13MAT301, EM13MAT305, EM13MAT401, EM13ARM502, EF09MA10)

Fractals are geometric objects with scale symmetry, forming patterns that repeat themselves in smaller parts of the original object. The most common mathematical representations are Mandelbrot fractals and Julia fractals.

Equation

Julia fractals are formed in a complex Cartesian plane by the sum of the real and imaginary components. The basic formula for the Julia set is given by:

\[ z_{n+1}=z_{n}^{2}+c \]

Where:

  • z ∈ C: usually initialized as the point on the complex plane;

  • c ∈ C: fixed for each Julia set.

Suggestion

1. Try changing the Real and Imaginary components of the formula to obtain different artistic patterns. Here are some suggestions:
c = 0 + 0i
c = -0.4 + 0.6i
c = 0.285 + 0i
c = -0.8 + 0.156i
c = 0.45 + 0.1428i

11.2 Context - Music notation editor (EF15AR06, EF69AR22, EM13ARH402)

The following example illustrates the concepts of pitch (tonality) and duration for musical notes in the diatonic scale. The captions represent the duration values, and the tonalities are presented in their frequency values

1. Try changing the melodic sequence of the code in the corresponding vector;
2. Try changing the duration figures in the corresponding vector

12 Animation

Like simulations, animations can help in understanding a specific topic. JSPlotly does not work directly with animations as the Plotly.js library does, as this requires changes to the source code that are not in line with the intended teaching, learning, and research objectives (e.g., insertion of frames, buttons, transitions, etc.). However, it is possible to simulate an animation to improve learning of a topic by inserting a manual slider.
The following example shows a simulator for manual animation for mathematical functions. To use it, simply slide the slider progressively to see a graphical representation of the result as the predictor variable changes.

Note: This teaching object has a trick…actually, two! After clicking add plo, you must first slide the slider to view the graph. And to view an animation for another equation, you must refresh the page, as instructed at the bottom of the graphic screen.

Suggestion:

1. Slide the control to highlight the manual animation;
2. Try replacing the model equation with another one, and drag the slider to observe the effect;
3. Change some parameters for the animation, for example, increasing the “frames” levels (slider.max = “50”; slider.value = 1).

13 STEAM

13.1 Context - Pottery wheel (EM13MAT101, EM13MAT403, EM13CNT204, EM13AR01, EM13AR02)

The platform also allows creations for integration in Science, Technology, Engineering, Arts, and Mathematics (STEAM). Here is an example of a simulation for ceramic turning and manual clay molding, which allows you to experiment with symmetrical and rounded shapes, such as vases, bowls, and pots, by adjusting some parameters and the trigonometric functions of the code.

1. Change the height of the vase, its shape, and its colors by editing the code in the specific fields.

13.2 Context - Mini CAD (EM13MAT301, EM13MAT503, EM13MAT402)

Here is an example of code for manipulating 3D geometric shapes (curves or lines) when creating a mini CAD (Computer-Aided Design).

1. Try changing the base, height, and curvature parameters of the code, also varying the sign of the values (positive, negative);
2. Change a trigonometric function (lineX or lineY, sine to tangent, for example), and overlay it on the plot;
3. Overlay geometric figures with different color palettes.
4. Create symmetrical figures by overlaying a curve with a positive parameter on one with the same negative parameter.

14 Game

Since JSPlotly involves a programming language, JavaScript, it is plausible that it can offer a set of tangible operations to it, regardless of the construction of graphics (as in diagrams and flowcharts above).
In parallel with the richness that accompanies gamification as an active methodology, creating a game can stimulate learners to another level, since strategy is often already part of their daily lives. Playing is one thing… creating a game can have a more prominent and recursive impact on computational thinking and logic, as well as on learning the programming language itself!

Context - Memory Game (EF06MA19, EF06MA16, EF07MA26, EF09MA19, EM13MAT401, EM13MAT102, EM13MAT403)

The clickable image below leads to a classic Numerical Memory Game. The goal is to match a pair of values after memorizing a numerical table. To play, follow the instructions below:


Instructions for the Numerical Memory Game:

    1. In the upper field there are two Boolean constants true/false, one to play (play) and another to check the answer (check), as well as a seed that sets a random numerical table;
    1. Start the game (play/false, check/false);
    1. Click on the add plot button and a grid of number pairs will be displayed for memorization;
    1. Switch to play/true, click on clean plot, and then on add plot. The grid will now be displayed with only one value (the other cells will show “?”);
    1. Select verify/true, click on clean plot, and then on add plot. A field will appear for you to enter the coordinates where you believe the other number pair is located (e.g., A2);
    1. Click on OK, and a pair consisting of the initial value and the chosen value will be displayed for verification.
To restart the game, click clean plot and select false for the Boolean options.
Have fun!


1. To play again and change the values in the table, simply modify the *seed* constant to any number;
2. To vary the difficulty levels of the game, simply change the number of rows and columns in the respective constants in the code.
Back to top