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)!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 Mathematics
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
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 Physics
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²).4 Chemistry
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 Biology
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 Geography
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.7 History
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 Languages
8.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.