JSPlotly e GSPlotly na Escola

  Para ilustrar o potencial de uso do JSPlotly para o ensino fundamental e médio, seguem alguns exemplos de simulações e cujos gráficos são frequentemente encontrados em livros-texto e conteúdos afins. Para um melhor aproveitamento de cada tema, experimente seguir as sugestões para manipulação paramétrica em cada tema.
  Se preferir um aprendizado mais direcionado, experimente acessar um material em construção inicial, Livros Vivos.


Instruções

1. Escolha um tema;
2. Clique no gráfico correspondente;
3. Clique em "Add Plot";
4. Use o mouse para interatividade e/ou edite o código. 

Lembrete: o editor usa desfazer/refazer infinitos no código (Ctrl+Z / Shift+Ctrl+Z) !


1 Matemática

1.1 - Trigonometria (EM13MAT306, EM13MAT308, EM13MAT307)

  A simulação a seguir objetiva facilitar a visualização para alguns conceitos em trigonometria, seno, cosseno e tangente. O código permite usar um menu suspenso para cada função trigonométrica, bem como um slider para alterar a frequência em radianos.

Equação:

1. Função seno:

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

2. Função cosseno:

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

3. Função tangente:

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

Sugestão:

1. Selecione, alternativamente, a função seno, cosseno, e tangente, utilizando-se o "menu suspenso";
2. Experimente o efeito de se alterar a frequência da função na barra deslizante ("slider");
3. Sobreponha um gráfico de seno e um de cosseno para observar suas diferenças;
4. Repita o mesmo para o gráfico de tangente.


1.2 - Uso de seletor e botões em flutuação de dados (EF07MA21, EF07GE04, EM13MAT301, EM13CHS104, EM13CNT103)

  Um botão acessa uma determinada situação, enquanto que um seletor permite ampliar determinada área de valores buscando sobressair uma informação gráfica para uma função ou flutuações significativas. Ilustra-se ambos abaixo uma simulação para flutuação temporal de valores (expressada como uma senoide modificada por acréscimos aleatórios).


Sugestão:

1. Arraste os marcos de extremidade do gráfico para visualizar um limite mais restrito;
2. Clique nos botões com períodos distintos;
2. Pode-se alterar o ruido aleatório em torno da equação matemática que define a flutuação acima bastando-se modificar a linha de código em: "const valores = dias.map((_, i) => 50 + 10 * Math.sin(i / 10) + Math.random() * 50);" - altere "50" para "5".


1.3 - Animação simulada para uma função (EF07MA20, EF09MA20, EM13MAT302, EM13MAT304)

  É possível com o aplicativo simular uma animação por quadros, visando melhorar o aprendizado de um tema, por inserção de um controle deslizante manual. O exemplo a seguir apresenta um simulador para animação manual para funções matemáticas. Para seu uso, basta deslizar o slider progressivamente para visualização gráfica do resultado frente à mudança da variável preditora.

Obs: Esse objeto didático tem um truque…na verdade, dois ! Após clicar em add, é necessário deslizar o slider primeiro para visualizar o gráfico. E para visualizar uma animação para outra equação, é necessário atualizar a página, como orientado na margem inferior da tela gráfica.

Sugestão:

1. Deslize o controle para evidenciar a animação manual;
2. Experimente substituir a equação modelo por outra, e arraste o controle deslizante para observar o efeito;
3. Altere alguns parâmetros para a animação, por exemplo, aumentando os níveis de "frames" (slider.max = "50"; slider.value = 1);
4. Recarregue a página e mude a função matemática; ex: "let f = x => Math.sin(x);"


1.4 - Animação simulada com múltiplos deslizadores

  Mais simples e imediato que alterações no código, deslizadores (sliders) podem contribuir de modo mais imediato à compreensão de um problema, como segue para o exemplo dos parâmetros de uma parábola.

1. Arraste qualquer slider, e observe a tendência apresentada, bem como a mudança nos parâmetros da equação no topo;
2. Como no exemplo anterior, é possível alterar a função matemática no código, bem como os parâmetros para um novo slider. Teste isso alterando a função "  y_values = x_values.map(x => a * x * x + b * x + c);
" para "  y_values = x_values.map(x => Math.sin(a * x * x + b * x + c));"

1.5 - Composição fractal (EM13MAT301, EM13MAT305, EM13MAT401, EM13ARM502, EF09MA10)

      Fractais constituem objetos geométricos com simetria de escala, formando padrões que se repetem em partes menores do objeto original. As representações matemáticas mais comuns são os fractais de Mandelbrot e os fractais de Julia, e que combinam Arte e Matemática em figuras geométricas com dimensões fracionárias que expressam o grau de complexidade e ocupação de espaço. Originalmente concebidos junto à IBM nos anos 80, fractais são hoje testemunhados desde o contorno cartográfico de certas regiões até a distribuição de células vivas em cultura.

Equação

     Fractais de Julia são formados em plano cartesiano complexo, pela somatória dos componentes real e imaginário. A fórmula básica para o conjunto de Julia é dada por:

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

Onde:

  • z ∈ C: geralmente inicializado como o ponto do plano complexo;

  • c ∈ C: fixo para cada conjunto de Julia.

Sugestão

1. Experimente alterar os componentes Real e Imaginário da fórmula, para obter padrões artísticos distintos. Seguem sugestões:
  c = 0 + 0i
  c = -0.4 + 0.6i
  c = 0.285 + 0i
  c = -0.8 + 0.156i
  c = 0.45 + 0.1428i


1.6 Fractal de Mandelbrot

  Outra estrutura interessante envolve os fractais de Mandelbrot, representados por um conjunto diferente de equações. O exemplo a seguir agrega esse fractal com menu de escolha.


Sugestão

1. Selecione cores e níveis de ampliação distintos ("zoom") nos dois menus, para visualizações distintas;
2. Verifique onde se encontram as equações que definem o perfil de Mandelbrot no código, e tece pequenas alterações para verificar resultados distintos.


2 Matemática Financeira

2.1 - Juros Compostos (EM13MAT402):

  Também conhecido pela máxima “juros sobre juros”, os juros compostos incorporam valor ao capital ao longo do tempo, resultando no cresimento do montante final.

Equação:

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

Onde,

  • M: montante final
  • C: capital inicial
  • i: taxa de juros por período (em decimal)
  • t: número de períodos (ex: meses)

Sugestão:

1. Varie o período de contratação, a taxa mensal de juros ou o montante inicial.
2. Experimente combinar os parâmetros na variação.
3. Avalie a diferença visual entre um investimento e um empréstimo, inserido valor positivo de capital inicial para o 1o. e negativo para o 2o. 
4. Observe a curva descendente para um empréstimo simulado com capital inicial negativo. Os valores remanescentes referem-se à dívida faltante para quitar o empréstimo.


3 Estatística

3.1 - Curva de distribuição normal (EM13MAT316, EM13MAT407, EM13MAT312)

      Amostragem e população são temas comuns para observação de dados em procedimentos analíticos. As curvas de distribuição estatísticas para isso envolvem a distribuição t-Student, F-Snedecor, Chi-quadrado, e distribuição normal. A curva de distribuição normal reflete o comportamento estatístico para fenômenos naturais em uma dada uma população de dados.
      O exemplo pretende ilustrar o uso da transformação z, o cálculo de valores críticos, e a interpretação da área sob a curva no estudo da distribuição normal e de inferência estatística.

Equação

      A função densidade da distribuição normal (ou Gaussiana) é dada abaixo?

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

Onde:

  • \(\mu\) = 0 (média da distribuição);
  • \(\sigma\) = 1 (desvio padrão);
  • x = variável aleatória contínua; f = função de densidade da distribuição normal
      Da equação acima pode-se extrair z, o valor da variável aleatória padronizada para média nula e desvio-padrão unitário, representando o valor no eixo das abscissas:

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

Sugestão:

1. Experimente alterar o valor de "p" e rodar o gráfico. Esse valor representa a probabilidade de se observar, sob a hipótese nula, um valor tão extremo ou mais extremo do que o observado — ou seja, mede a evidência contra a hipótese nula. No gráfico, representa a área sob a curva normal nas regiões críticas, indicando a chance de ocorrência do resultado observado por puro acaso.


3.2 - Animação de um histograma (EF09MA21, EM13MAT406, EM13MAT407)

  Informações estatísticas são por vezes representadas graficamente, como a distribuição de valores em gráficos de caixa e bigodes (box-and-whisker plot) ou por histogramas. O exemplo abaixo ilustra o potencial para a compreensão de um histograma agregado a um recurso de animação.



Sugestão:

1. Observe no topo do script as diversas constantes passíveis de alteração para uma animação distinta, e experimente alterá-las uma a uma para compreender tanto a ação do objeto, como o conteúdo estatístico a que se refere:
  const mu = 0 (média);
  const sigma = 1 (desvio-padrão);
  const n_frames = 50 (no. de quadros);
  const sample_per_frame = 20 (taxa de amostras/quadro);


4 Ciências da Computação

4.1 - Treinamento em JavaScript (EF09LP27, EF06MA20, EM13MAT503, EM13LGG701)

  De especial tecido ao pensamento computacional e à lógica de programação, o exemplo que segue ilustra uma metalinguagem ao JSPlotly, qual seja, um aplicativo em linguagem de programação específica produzindo um script para o aprendizado da própria linguagem.



Sugestão:

1. Aqui o "céu é o limite" ! Existem inúmeras possibilidades para comandos e funções em JavaScript, bem como para saída conjunta de dados, cálculos e gráficos.


5 Física

5.1 - Altura, harmonia e timbre de sons (EF15AR06, EM13ARH402)

      O exemplo a seguir ilustra os conceitos de altura (frequência), harmonia e timbre (ondas puras e harmônicos) para um gráfico de tonalidades musicais (escala diatônica).


Sugestão:

1. Teste outras tonalidades (C,G,D, etc), observando como se apresenta a onda pura sobrepondo os gráficos;
2. Avalie a diferença entre uma onda pura e aquela produzida com instrumentos musicais, envolvendo harmônicos naturais. Para isso, substitua a opção booleana de "false" para "true" na variável "const ondaComposta".


5.2 - Energia potencial elástica (EM13CNT102,EM13CNT202, EM13MAT402)

  A deformação de um material elástico é diretamente proporcional à força exercida sobre esse, e limitada às propriedades do material.

Equação

  O comportamento de uma mola ideal é descrita pela Lei de Hooke abaixo:

\[ F = -k*x \]

Onde:

  • F = força restauradora da mola (N);
  • k = constante elástica da mola (N/m);
  • x = deformação (m).
  Por outro lado, a energia potencial elástica envolvida é descrita pela relação quadrática que segue:

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

Onde:

  • E = energia potencial elástica (J).

Sugestão:

1. Experimente alterar o valor da constante elástica da mola para evidenciar seu efeito, relacionando-a com molas mais rígidas ou menos rígidas;
2. Altere os limites de deformação da mola na "estrutura de constrole" do código (ex: "for (let x = -0.7)"), e observe o efeito na energia potencial máxima;
3. Observe que, pela operação quadrática no valor da deformação, a energia potencial é sempre positiva.


5.3 - Movimento de corpos (EM13CNT102):

  O código a seguir ilustra a trajetória de um lançamento oblíquo com ângulo ajustável por uma barra deslizante (slider), útil para explorar os conceitos de cinemática.

Equação:

1. Equação geral

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

Onde:

  • y(x): altura em função da distância horizontal;
  • x: posição horizontal (m);
  • \(\theta\): ângulo de lançamento em relação à horizontal (radianos ou graus);
  • v0: velocidade inicial do projétil (m/s);
  • g: aceleração da gravidade (9,8 m/s²\(^{2}\))

2. Tempo total de vôo:

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

3. Posição Horizontal ao longo do tempo

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

Sugestão:

1. Veja que há uma barra deslizante para ângulos iniciais na simulação. Arraste a barra para outro ângulo e adicione o gráfico, comparando o efeito dessa modificação.
2. Altere a velocidade inicial no código, e observe o efeito no gráfico.
3. Simule uma "condição lunar" para a trajetória, e cuja gravidade é em torno de 1/6 a da Terra (~1.6 m/s²).


5.4 - Animação para lançamento oblíquo (EF09CI09, EF09MA20, EM13CNT103, EM13MAT304)

  Assim como simulações, animações podem auxiliar na compreensão de um tema específico (aprendizado basedo em simulação ou em animação). O JSPlotly pode trabalhar diretamente com animações junto à biblioteca Plotly.js (inserção de frames, buttons, transitions, por ex).
      Segue uma animação para lançamento parabólico de um projétil, descrita pelas equações do tópico anterior. Distinta daquele, porém a inserção de uma animação possibilita agregar valor à compreensão do fenômeno, ao oferecer a possibilidade de manipulação paramétrica do código associada à animação propriamente dita.


Sugestão:

1. Assim como no tópico anterior, experimente alterar parâmetros da equação, tais como a velocidade inicial e o ângulo de ataque, e observar o efeito dessas mudanças.


5.5 - Animação para movimento de translação em sistema solar - dados aproximados (EF05CI08, EF07CI01, EM13CNT104, EM13CNT103)

  Representações dinâmicas para fenômenos complexos podem auxiliar no caminho ao entendimento desses, não importando a área de conhecimento. Além disso, simulações com dados aproximados da realidade podem também inserir um outro quadro imagético na percepção cognitiva do aprendiz. O exemplo abaixo ilustra uma animação para o movimento de translação dos planetas de nosso sistema solar baseada em dados aproximados.



Sugestão:

1. Observe que há uma barra deslizadora no topo do objeto; arraste-a para observar velocidades distintas para a animação;
2. Observe que a imagem foi possibilitada por "zoom" no ecrã gráfico, para melhorar a visualização dos planetas. Nesse sentido, experimente utilizar tal recurso durante a animação; 
2. Veja que existem 8 planetas na animação, não se inserindo o planeta-anão Plutão. Isso não é por descaso ao próprio, mas porque você pode observar o quão lento é a movimentação dos planetas a medida que se distanciam do Sol (vide Netuno, praticamente estático). Nesse sentido, verifica-se o potencial de uma animação com dados aproximados, trazendo consigo informações adicionais não perceptíveis nos livros-texto sobre o assunto.


5.6 - Animação para movimento harmônico simples (EF09CI09, EF09MA18, EM13CNT104, EM13CNT203)

  Entre diversas situações para análise de propriedades físicas de materiais e sistemas, a relação linear entre massa aplicada e deformação da mola é de importância significativa. A equação que representa a posição da massa em função do tempo é dada abaixo.

Equação

\[ x(t)=Acos(ωt+ϕ) \]

Onde:

  • x(t) = A posição da massa no tempo t;
  • A = amplitude do movimento, que é a distância máxima da massa a partir da posição de equilíbrio (no caso, x=0);
  • \(\omega\) = frequência angular, que define a taxa de oscilação. Ela é calculada por 2\(\pi\)/T, onde T é o período (o tempo para um ciclo completo);
  • \(\phi\) = fase inicial ou constante de fase, que define a posição da massa em t=0


Sugestão:

1. Experimente alterar alguns parâmetros da equação de movimento, como a amplitude A e a frequência angular;
2. Aumente a frequência angular da animação reduzindo o denominador em "const w";
2. Experimente o botão "html" e evidencie que a animação é preservada na exportação do arquivo;
3. Experimente o botão "clone" e evidencie que é possível compartilhar o objeto na configuração congelada juntamente ao código modificado


5.7 - Animação para movimento pendular (EF09CI09, EF09MA18, EM13CNT104, EM13CNT203)

  Semelhante ao objeto anterior, tem-se aqui uma animação para o fenômeno mecânico de movimento periódico de um pêndulo. As equações que descrevem a posição de um pêndulo simples em função do tempo, usando a aproximação de pequenas oscilações, é dada a seguir.


Equação

\[ θ(t)=θ_0​cos(ωt) \]

\[ x(t)=L​sin(θ) \]

\[ y(t)=−L​cos(θ) \]

\[ ω=\sqrt{\frac{L}{g}} \]

Onde:,

  • θ(t) = posição angular;
  • x(t) = coordenada x;
  • y(t) = coordenada y;
  • ω = frequência angular


Sugestão:

1. Como sugerido para outros objetos, experimente a "exploração paramétrica" da equação envolvida no código, alterando seus parâmetros;
2. Observe uma característica vantajosa de simulações sobre experimentos reais: a realização em condições impossíveis na prática. Para isso, experimente a simulação como se estivesse na Lua, com alteração no valor de aceleração da gravidade para 1,62 m/s^2 (mas com ".", e não "," - por tratar-se de sintaxe de programação.


6 Química

6.1 - Bandas de absorção em função de concentração - representação 3D (EF09CI04, EF09MA17, EM13CNT103, EM13MAT305)


Sugestão

1. Experimente alterar o padrão do gráfico e suas cores. Respectivamente: type: 'surface', colorscale: 'Viridis');
2. Altere a faixa de comprimento de onda, separando os picos; para isso, mude as variáveis min/max de lambda: const lambdaMin = 450, lambdaMax = 600;


6.2 - Capacidade Calorífica (EF09CI06, EM13CNT104, EM13CNT203)

  A simulação que segue visa observar a relação entre o calor trocado (Q), a massa (m), a capacidade calorífica (c) e a variação de temperatura (\(\Delta\)T).

Equação:

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

Sugestão:

1. Experimente variar inicialmente a temperatura, sobrepondo alguns gráficos;
2. Varie também a massa no editor de códigos, para comparação.


6.3 Mistura de substâncias em reação exotérmica - gráfico 3D (EF09CI02, EM13CNT103, EM13CNT103)

  Simulações podem ser realizadas sem necessariamente envolver uma relação matemática, como na observação experimental de duas variáveis, como tempo e concentração, simulando uma reação química exotérmica. Segue um exemplo interativo em 3D.
  Nesse caso, a equação utilizada no editor envolve uma variação suave de temperatura ao longo do tempo, empregando-se a função seno e uma temperatura inicial (vide o código).


Sugestão:

1. Experimente variar inicialmente a temperatura, sobrepondo alguns gráficos;
2. Varie também a massa no editor de códigos, para comparação.


6.4 - Animação e cinética de reação

      Um tópico de assimilação desconfortável ao estudante refere-se à abstração necessária para se descortinar as relações matemáticas que se apresentam na cinética de reações químicas. Ao tratar da conversão de reagentes em produtos, por exemplo, é inerente certa barreira à aprendizagem referente à taxas de reação, inibição e ativação. Para reduzir o impacto dessa abstração, segue um exemplo para uma animação para cinética de reação, e cujo objeto altera-se em função de opções de taxas e moduladores à reação.


Equação:

\[ R(t)=\frac{R_0}{1+k_{efetiva}​t} \]

\[ P(t)=R_0​−R(t) \]

Onde,

  • \(R(t)\) = quantidade de reagente R no instante \(t\) (unidades arbitrárias);
  • \(P(t)\) = quantidade de produto P no instante \(t\) (unidades arbitrárias);
  • \(R_{0}\) = quantidade inicial de reagente no tempo \(t=0\);
  • \(t\) = tempo (em segundos);
  • \(k_{\text{cinética}}\) = constante de velocidade de base (em \(s^{-1}\));
  • \(k_{\text{efetiva}}\) = constante efetiva após considerar catalisador e/ou inibidor:

\[ k_{\text{efetiva}} \;=\; k_{\text{cinética}} \times \begin{cases} f_{\text{cat}}, & \text{se catalisador ligado}\\[6pt] 1, & \text{se catalisador desligado} \end{cases} \times \begin{cases} \dfrac{1}{f_{\text{inh}}}, & \text{se inibidor ligado}\\[6pt] 1, & \text{se inibidor desligado} \end{cases} \]


Sugestão

1. Experimente alterar a constante "k_cinetica" no topo do código (ex.: 0.008, 0.017, 0.05) e use Play/Reset para comparar;
2. Experimente incluir/retirar inibidor e catalisador;
3. Experimente alterar o potencial dos moduladores acima editando suas constantes:
  a. const fator_catalise  = 2.0; 
  b. const fator_inibicao  = 3.0;


6.5 - Painel interativo (dashboard) para medidas ambientais - dados simulados (EF07MA21, EF09MA21, EM13MAT406, EM13LGG604)

  Atualmente é frequente a apresentação de dados em um painel contendo diferentes informações interativas ou dados que se complementam em gráficos e tabelas, por exemplo. Esses paineis permitem um visão panorâmica do tema abordado, bem como ajustes em parâmetros nele contidos. Segue um exemplo de painel com dados simulados para medidas de condutividade e temperatura em meio aquoso, e com parâmetros ajustáveis por um slider (pouco prático, na verdade, mas ilustrativo do potencial do aplicativo).



Sugestão:

1. Ainda que seja um objeto que apenas simula a aquisição de dados, pode-se obter um resultado diferente interferindo-se no código, como:
  a. Alteração dos sliders: "slider.min = "0";slider.max = "24"; slider.step = "1" " ;
  b. Alteração nas equações que definem o comportamento dos mostradores:
    "const tempo = Array.from({ length: 25 }, (_, i) => i); // 0 a 24h
     const temperatura = tempo.map(t => 20 + 5 * Math.sin((t - 6) / 3)); // pico 12h
     const condutividade = tempo.map(t => 100 + 30 * Math.cos(t / 5)); "


7 Biologia

7.1 - Área de biomas brasileiros (EF05GE05, EF08GE08, EM13CNT301, EM13CNT304)

Sugestão

1. Os dados apresentados são apenas para efeito de simulação. Desejando dados mais robustos, recomenda-se fontes seguras (ex: MapBiomas Brasil - https://brasil.mapbiomas.org/)
2. Este é um gráfico de barras, apenas isso. Se você alterar as informações presentes nas constantes dos 3 primeiros vetores ("const X = [...]"), poderá converter a representação para um tema distinto.


7.2 Diagrama de ciclo da água (EF06CI03, EF06CI04, EM13CNT103, EM13CNT202)

  O aplicativo também permite a criação de outros objetos didáticos interativos, sem a necessidade de inserção de equações, como diagramas e fluxogramas. Seguem exemplos.

Sugestão:

1. Como para diagramas acima, experimente alterar no código as propriedades das setas e dos termos e campos envolvidos no fluxograma;
2. Substitua termos para a formação de outro fluxograma;
3. Reposicione os objetos na área gráfica (campos, termos, setas) com auxílio do mouse.


7.3 Diagrama de ciclo claro e escuro da fotossíntese (EM13CNT101, EM13CNT103, EM13CNT201, EM13MAT405)

Sugestão

1. Experimente reposicionar as entradas e saídas (ex: Luz, Glicose) por simples arraste de mouse;
2. Substitua os termos dentro dos quadros, ou mude outros aspectos do diagrama (cor, preenchimento, por ex).


7.4 - Modelo de Crescimento Populacional com Fase Lag (EM13CNT102, EF06MA17, EF08CI06, EM13MAT301, EM13CNT201)

  Este modelo apresenta uma função logística que simula o crescimento populacional (microorganismos, células, por ex), acompanhado por um componente de retardo. Variando-se os parâmetros no editor, é possível estimar diversos perfis de crescimento populacional.

Equação:

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

Onde:

  • K = capacidade de suporte ambiental;
  • N0 = população inicial;
  • r = taxa intrínseca de crescimento;
  • A(t) = fator de ativação do crescimento com atraso (fase lag);
  • t0 = ponto médio de transição entre fase lag e fase log;
  • k = constante de suavidade do retardo (fixado como 0.5 no código)

Sugestão:

1. Experimente variar os parâmetros da equação, combinando alguns, e comparando seus efeitos sobre os gráficos:
  a. Capacidade de suporte;
  b. População inicial;
  c. Taxa de crescimento;
  d. Retardo (fase lag);


7.5 - Eficiência energética e cadeia alimentar (EF06CI02, EM13CNT202, EM13CNT203)

      Segue um exemplo para retratar a transferëncia de energia entre diferentes níveis tróficos de uma cadeia alimentar. Embora não haja propriamente uma função matemática que a descreva, pode-se aplicar a lei dos 10% de eficiência ecológica entre os níveis da cadeia, o que resulta numa relação logaritmica de transferência.

Sugestão

1. A regra de Lindeman, esboçada na referência acima, estabelece uma variação para 5-20% de eficiência energética no ecossistema. Assim, experimente sobrepor as curvas com tais taxas;
2. Se quiser observar a relação logarítmica da transferência de energia, acrescente o comando "type: 'log'," , logo abaixo de "title: 'Energia disponível (unidades)',".


7.6 - Animação para potencial de ação de neurônio (EF08CI08, EF09CI01, EM13CNT202, EM13CNT302)

  Alguns fenômenos naturais são observados no tempo, embora sua representação didátida em livros e afins seja oferecida de modo estático. No exemplo que segue, uma animação para potencial neuronal faculta lubrificar o aprendizado para eventos de despolarização/hiperpolarização/repolarização que acompanham a transmissão nervosa.



Sugestão:

1. Experimente alterar os valores padrão para os potenciais apresentados em "function potencial(i)" do código;
2. Valores alterados estão presentes em alguns quadros neurológicos, como epilepsia e esclerose múltipla.


7.7 - Animação de mapa de áreas queimadas por bioma no Brasil - dados fictícios de 1955 a 2024 (EF07CI08, EF08GE08, EM13CHS101, EM13CNT201)

      O uso de mapas em C. da Natureza e C. Humanas encontra um ponto em comum para problemas ambientais e sócio-econômicos, como o ilustrado pela animação a seguir. Nessa, a área em quilômetros quadrados para queimadas em cada bioma brasileiro é oferecida à animação com período e área junto ao título do objeto interativo, e com slider temporal abaixo.



1. É salutar buscar fontes de informação mais precisas sobre os temas tratados, posto que o GSPlotly, como um assistente de IA, não garante a a natureza das informações. No exemplo, sugere-se o "Programa Queimadas - INPE - Terrabrasilis" (https://terrabrasilis.dpi.inpe.br/queimadas/situacao-atual/situacao_atual/);
2. Pode-se inserir dados mais precisos no próprio script, no campo de "const usar_dados_ficticios = true; // mude para false e preencha areaBiomaAno_real()";
3. Pode-se modificar a temática do mapa animado para qualquer outra, bastando-se alterar os dados nas constantes de "Controle Geral" do script.


7.8 - Jogo da Vida de Conway (EF06MA20, EF09MA24, EM13MAT503, EM13CNT201)

  Este objeto ilustra uma versão de autômato celular concebido em 1970 por J.H. Conway, e que simula eventos biológicos como nascimento, crescimento, reprodução e morte, pela distribuição iterativa e parcialmente caótica de pixels numa tela. O Jogo possibilita uma abordagem matemática e visual para regras simples aplicada a fenômenos complexos.
  O Jogo permite 4 padrões distintos (Glider, Blinker, Toad, Random), cada qual distribuindo eventos de nascimento, sobrevivência e morte, em função de relações matemáticas. Pode-se pausar para observar detalhes da evolução.



Sugestão:

1. Veja no topo do código que é possível alterar-se o tamanho da grade, os passos de tempo, e a probabilidade de uma célula estar viva no modo "Random".


8 Geografia

8.1 Mapa do Brasil e Capitais (EM13CHS101, EM13CHS202, EM13CHS301)

  Não apenas de equações vive o JSPlotly ! Com a biblioteca Plotly.js que o compõe, é possível produzir também mapas interativos, como o da simulação que segue.

Sugestão:

1. Experimente usar o botão de rolagem do mouse e ícone "pan" da barra superior, para interagir com o mapa.


8.2 Mapa mundi e algumas cidades de grande porte (EF06GE05, EF07GE06, EM13CHS101, EM13MAT502)


1. Experimente alterar o script, inserindo outras cidades com suas respectivas coordenadas geográficas em "const data" (text, long - longitude, lat - latitude)


8.3 Mapa e PIB do Oriente Médio (EF09GE03, EF08GE06, EM13CHS104, EM13CHS201)

Sugestão:

1. Experimente usar o botão de rolagem do mouse;
2. Clique num país para identificar seu nome e produto interno bruto aproximado;;
3. Modique o código para atualizar algum dado, ou para modificar a informação (trocando PIB por outro dado, por ex).


9 História

9.1 - Distribuição de escravizados nas Américas no período de 1500–1888 (EF08HI06, EM13CHS104, EM13CHS503):

   Esta simulação apresenta um gráfico de barras interativo para seleção de período por menu suspenso, e tangente à quantidade estimada de africanos escravizados desembarcados nas principais regiões da América. Os dados são estimativas aproximadas para ilustrar o potencial de visualização do aplicativo, embora servindo como ponto de partida para discussões educacionais mais precisas. Fontes passíveis de consulta incluem Slave Voyages.


Sugestão:

1. Experimente alterar entre os períodos no menu suspenso, comparando as estimativas de tráfico escravo;
2. Selecione um período, crie o gráfico, selecione outro período, e adicione outro gráfico. Isso permite comparar o quantitativo de escravos aportados pelas barras duplas formadas, e passagem do mouse sobre cada barra.


9.2 - Linha do tempo de eventos da Idade Média (EM13CHS101, EM13CHS102)

Fonte: Encyclopedia.com

Sugestão:

1. Experimente alterar no código eventos e períodos, e destinados a outro período da História humana.


9.3 - Alterações cartográficas percebidas ao longo do tempo (EF08GE09, EF07GE05, EM13CHS102, EM13CHS104)

      Pode ser interessante transmitir informações geográficas e/ou históricas ao longo do tempo na representação de um mapa. Segue um exemplo.


Sugestão:

1. Pode-se alterar a formatação do mapa no código para cores ("lakecolor"), posição do menu ("updatemenus"), duração da transição entre frames ("transition"), entre outros;
2. Esse exemplo é genérico; altere as constantes em "paises", "anos", e "valores", e obtenha um novo mapa para um tema específico.


9.4 - Linha do tempo de eventos da Idade Média (EM13CHS101, EM13CHS102)

Fonte: Encyclopedia.com

Sugestão:

1. Experimente alterar no código eventos e períodos, e destinados a outro período da História humana.


10 Linguagens

10.1 - Gírias faladas no Brasil de 1980-2020 (EF89LP19, EM13LGG102)

  Esta simulação é direcionada para uma estimativa do uso de gírias faladas no Brasil durante os últimos 40 anos. A representação dá-se num gráfico de pizza, e a seleção por década num menu suspenso.


1. Pode-se usar a passagem de mouse para observar o "tip" (dica) apresentada para cada dado no gráfico.


10.2 - Frequência de palavras em texto (EM13LGG101, EM13LGG302, EM13LGG303)

Sugestão

1. Experimente substituir o texto do código por outro;
2. Experimente variar o quantitativo de termos mais frequentes na variável "const entradas" (opcionalmente, varie também no título do gráfico, para fazer sentido);
3. Compare um texto em português com sua tradução para inglês ou outra língua.


10.3 - Obras lieterárias e movimentos estéticos (EF89LP47, EM13LP01, EM13LP02, EM13LGG201)

  O exemplo que segue ilustra o uso de recursos interativos, botão e seletor, para um conjunto de obras da literatura nacional.

Sugestão

1. Arraste os marcadores extremos para ampliar o foco em um período específico da lieratura;
2. Altere o script acrescentando outras obras-chave em "const obras =" e "const periodos ="

11 Arte

11.1 - Criação de objetos 3D (EF09MA16, EF15AR06, EM13MAT405, EM13LGG604)

  Objetos tridimensionais podem ser gerados por funções matemáticas no espaço tridimensional, tal como ilustrado abaixo.


1. Experimente alterar alguns valores no script, testando o resultado. Por exemplo, crie uma tapete (ou melancia achatada) alterando o código em: "const zVal = L * (t - 0.5)"...para "const zVal = L * (t - 20.5);"


11.2 - Editor de notação musical (EF15AR06, EF69AR22, EM13ARH402)

      O exemplo a seguir ilustra os conceitos de altura (tonalidade) e duração para notas musicais em escala diatônica. As legendas representam os valores de duração, e as tonalidades são apresentadas em seus valores de frequência

1. Experimente alterar a sequência melódica do código no vetor correspondente;
2. Experimente alterar as figuras de duração no vetor correspondente


11.3 - Espirógrafo animado (EF07MA18, EF09MA20, EM13MAT406, EM13LGG701s)

  Um espirógrafo consiste numa ferramenta lúdica composta réguas dentaadas e curvas para desenho, objetivando a criação de figuras geométricas complexas (trocoides). A seguir um exemplo de espirógrafo animado, unindo Arte e Matemática para a criação de figuras desse tipo.



Sugestão:

1. O objeto permite alterar o tipo de hipo ou hipertrocoide por menu, assim como pausar a animação por botão;
2. É possível alterar o padrão trocoide das figuras modificando-se uma relação matemática. Exemplificando, procure no código pela linha "Math.cos(t) + d*Math.cos(k1*t);", e altere o segundo termo para "Math.sin"


11.4 - Aplicativo: prancha de desenho (EF15AR06, EF09AR07, EM13LGG604, EM13LGG606)

  Não só de matemática, gráficos e mapas “vive” o JSPlotly. O exemplo que segue pretende oferecer uma prancha para desenhos, com variação de cores e espessura da caneta, e formas geométricas.



Sugestão

1. Explore o script. Apesar de simples, ele permite selecionar cores distintas, espessuras de canetas, e formas geométricas;
2. Como os demais objetos elaborados no JSPlotly, o desenho da prancha pode ser armazendo conservando sua interatividade pelo botão "html", e mesmo modificado no próprio arquivo salvo ("play.html");
3. Se desejar alterar cores, espessuras, ou quiser acrescentar outras funcionalidades, verifique as variáveis do script;
4. Experimente o botão "clone", que permite clonar a prancha juntamente com seu código.


12 Ensino Religioso

12.1 - Diagrama interativo sobre as 10 últimas encíclicas papais (EF05ER01, EF09ER02, EM13ER04)

Sugestão

1. Para perceber o dinamismo da representação, experimente arrastar qualquer parte do fluxograma, e observe a acomodação das demais;
2. Como dantes, pode-se alterar a informação constante no fluxograma, mantendo suas características gráficas e dinâmicas, bastando-se alterar as constantes utilizadas para gerar o objeto ("const = ").


13 STEAM

13.1 - Vaso em torno de olaria (EM13MAT101, EM13MAT403, EM13CNT204, EM13AR01, EM13AR02)

      A plataforma também permite criações para a integração em Ciência, Tecnologia, Engenharia, Artes, e Matemática (STEAM). Segue um exemplo de simulação para torneamento cerâmico e moldagem manual de argila, e que permite experimentar formas simétricas e arredondadas, como vasos, tigelas e potes, por ajuste em alguns parâmetros e nas funções trigonométricas do código.

1. Altere a altura do vaso, seu formato, e suas cores, editando o código nos campos específicos.

13.2 - Mini CAD (EM13MAT301, EM13MAT503, EM13MAT402)

      Segue um exemplo de código para manipulação de formas geométricas em 3D (curvas ou retas) na elaboração de um mini CAD (Computer-Aided Design).

1. Experimente alterar os parâmetros base, altura e curvatura do código, variando também o sinal dos valores (positivo, negativo);
2. Altere alguma função trigonométrica (linhaX ou linhaY, seno para tangente, por exemplo), e sobreponha ao plot;
3. Sobreponha figuras geométricas com paleta de cores distintas.
4. Crie figuras simétricas sobrepondo uma curva com parâmetro positivo a uma com mesmo parâmetro negativo.

14 Jogos

  Em função do JSPlotly envolver uma linguagem de programação, JavaScript, é plausível que consiga oferecer um conjunto de operações tangíveis a essa, independentemente da construção de gráficos (como em diagramas e fluxogramas acima).
  Em paralelo à riqueza que acompanha a gameficação como metodologia ativa, a criação de um jogo pode estimular o aprendiz a um outro nível, posto que a estratégia por vezes já faz parte de seu cotidiano. Jogar é uma coisa…criar um jogo pode ter impacto mais proeminente e recursivo ao pensamento e lógica computacionais, bem como ao aprendizado da própria linguagem de programação !

- Jogo da Memória (EF06MA19, EF06MA16, EF07MA26, EF09MA19, EM13MAT401, EM13MAT102, EM13MAT403, EM13LGG701)

  A imagem clicável abaixo direciona para um clássico Jogo de Memória Numérica. O objetivo é acertar um par de valores após memorização de um quadro numérico. Para jogar, siga as instruções que seguem:


Instruções para o Jogo de Memória Numérica:

    1. No campo superior existem duas constantes booleanas true/false, uma para jogar (jogue) e outra para verificar o acerto (verificar), bem como uma semente que fixa um determinado quadro numérico aleatório;
    1. Inicie o jogo (jogue/false, verificar/false);
    1. Clique no botão add e será exibido um quadro de pares numéricos para memorização;
    1. Troque para jogue/true, clique em clean plot, e depois em add. O quadro será exibido agora apenas com um valor (demais células mostratrão “?”);
    1. Escolha verificar/true, clique em clean plot, e depois em add. Será apresentado um campo para se digitar as coordenadas em que se acredita estar o outro par numérico (Ex: A2);
    1. Clique em OK, e será apresentado um par formado pelo valor inicial e o valor escolhido, para verificação do acerto.
  Para reiniciar o jogo, clean plot, e opções booleanas false.
  Divirta-se !!


1. Para jogar novamente alterando os valores do quadro, basta modificar a constante *semente* para um número qualquer;
2. Para variar entre níveis de dificuldade do jogo, basta alterar o número de linhas e de colunas nas constantes respectivas do código.

15 Aplicativo - Lousa Digital

  A natureza do objeto abaixo dispensa apresentações. Trata-se mais um entre os muitos aplicativos para simular uma lousa, ou quadro de giz/caneta digital. Diferente de seus concorrentes, contudo:
  1. Pode ser exportada como arquivo autossuficiente HTML em botão da própria lousa, e permitindo compartilhamento da imagem gerada, bem como continuidade de sua edição;
  2. Faculta a personalização do código que o produz, permitindo inserir/alterar canetas, espessuras, e ações distintas não previstas no código-fonte.


  Tangente à suas facilidades, a lousa digital permite:
  • Escrever com 7 cores e 3 espessuras distintas;
  • Acessar 4 planos de fundo de coloração diferente;
  • Sobrepor o plano com um grid;
  • Utilizar um apagador (erase);
  • Utilizar um apontador de laser para localização do que se pretende assinalar;
  • Salvar a imagem como PNG, indicando data e hora;
  • Salvar a imagem como HTML autossuficiente (obs: botão html do quadro; o do editor não funciona neste objeto);
  • Comando de desfazer (undo) e de limpeza (clean) do quadro;
  • Possui atalhos de teclado: E=borracha; L=laser; Z desfaz, X limpa, H salva HTML

Sugestão:

1. Pode-se alterar a espessura das canetas em "var baseWidth = 1;" ;
2. Os botões 1x, 2x, 4x são multiplicadores; edite as linhas de criação dos botões pra trocar rótulo/multiplicador (ex.: "addSize('3x', 3, true)").

Obs: o botão funcional para reprodução do quadro é o que está na própria lousa, "html". O botão do editor de códigos não opera para o aplicativo.

16 Musicalização

  Os objetos a seguir introduzem um outro potencial para o JSPlotly, qual seja, a possibilidade de trabalhar-se com áudio. Entre as bibliotecas possíveis, os exemplos abaixo ilustram o uso da tone.js, tanto para um instrumento monofônico (flauta doce), como para um instrumento polifônico (piano).
  Em paralelo à possibilidade de edição do código para aprimoramento e personalização do objeto, ambos são passíveis de fácil utilização como instrumentos musicais digitais standalone, uma vez que podem ser exportados pelo botão “html” preservando sua interatividade por mouse ou toque em telas capacitivas de dispositivos móveis.

16.1 - Flauta doce (EF15AR05, EF69AR09, EM13LGG601, EM13LGG604, EM13LGG701)



16.2 Sugestão

1. A flauta foi concebida para tons (círculo) e semitons (semicírculos). Você pode "tocar" a flauta clicando com o botão esquerdo do mouse sobre um orifício ou utilizando o dedo em um smartphone;
2. Você pode acrescentar ou omitir algum orifício na flauta, bastando alterar as duas linhas das variáveis "var naturais" e "var sustenidos";
2. Você pode transformar sua flauta num "pífano", geralmente mais agudo que a flauta doce, e bastante comum da tradição nordestina. Para isso, basta substituir as linhas das variáveis "var naturais" e "var sustenidos", mudando o valor de "5" para "6", como segue (adicione "add" em seguida - ou "clean"/"add"):
    var naturais   = ["C6","D6","E6","F6","G6","A6","B6"];
    var sustenidos = ["C#6","D#6","F6","F#6","G#6","A#6","B6"];
3. Na linha de raciocício acima, também é possível mudar o padrão da flauta doce, flautas baixas e contra-baixo. Exemplificando, uma flauta germânica (orifício maior, soprano, utilizada nas Escolas e representada no script) ou barroca (orifício menor, tons mais graves).


16.3 - Piano - com pedal de sustain (EF15AR05, EF69AR09, EM13LGG601, EM13LGG604, EM13LGG701)



16.4 Sugestão

1. É um piano pequeno, mas é um piano (2 oitavas) !! E como tal, você pode expressar sua aptidão musical com o instrumento polifônico;
2. Para prolongar o som das teclas eleve a barra de "sustentação";
3. Como parte do JSPlotly, o piano pode ser compartilhado sem o código, somente como instrumento para musicalização ou treino, já que é exportado pelo botão "html", preservando sua interatividade e sonorização por mouse ou toque de dedos num dispostivo móvel;
4. Também como parte do JSPlotly, é possível compartilhar o piano com os códigos para alteração junto ao botão "clone";


17 Acessibilidade e inclusão

  Por meio de toques de teclado, ajuste de tamanho de fontes, vibração em telas capacitivas, é possível imaginar o uso de JavaScript com Plotly.js para atender a um público com necessidades específicas de acessibilidade.
  Ilustrando essa possibilidade, e em função do uso de recursos de áudio por bibliotecas JavaScript, é possível conceber objetos do JSPlotly destinados a um estudante que se apresente cego.

17.1 - Gráfico sonoro acessível por teclado (EF69LP27, EF69AR09, EM13MAT406, EM13LGG604, EM13LGG701)

  Este objeto é simples. Basta o estudante portador da deficiência utilizar as setas esquerda e direita de um teclado simples para que ouça sons correlatos a uma função matemática escolhida por um supervisor. Assim, se a função cresce, o som terá timbres progressivamente mais agudos e, quando decresce, mais graves.
  Além disso, é possível alterar a frequência na barra deslizante, o que permite a percepção sonora para frequências mais baixa ou mais altas.
  Uma vez exportado pelo botão HTML do próprio objeto (e não do editor de códigos), esse pode ser compartilhadoa com manutenção da interatividade e sonoridade da função.



Sugestão:

1. Pode-se editar o código para uma função específica. Para isso, basta mudar a linha "var f = function(x){ ... }". Exemplos:
  a. return Math.sin(x*Math.PI/180); (graus);
  b. return Math.sin(x); (radianos);
  c. return Math.exp(-0.01*x)*Math.cos(0.2*x);
2. Pode-se alterar a velocidade de deslocamento da função pela função abaixo, e cujo valor é dado em milisegundos:
  "var PLAY_INTERVAL_MS = 100; "


18 Games

  Apesar de quase uma tradução, jogos referem-se a uma variedade ampla, incluindo cartas e tabuleiro, enquanto que games refletem mais os jogos eletrônicos e digitais. Seguem dois games ilustrativos do potencial do JSPlotly para essa finalidade, Arco e flecha, que utiliza animação apenas, e Pong, um clássico videogame esportivo dos anos 1972. Diferente do primeiro, o Pong combina interatividade, animação, e sonorização.

18.1 - Jogo de Arco e Flecha (EF09CI09, EF09MA18, EM13MAT302, EM13CNT104, EM13LGG701)



Sugestão

1. Altere o ângulo ("let theta_edit = 45") e/ou a velocidade inicial do disparo ("let v0_edit    = 20") para ajustar a parábola ao alvo;
2. Perceba que a pontuação é flexível: 5 pontos para proximidade do alvo, e 10 pontos quando o acerta.


18.2 - Game Pong (EF69AR09, EF06MA20, EM13LGG604, EM13LGG701)


  Para a reprodução deste game clássico utilizou-se a biblioteca adicional p5.js, voltada para arte interativa, animações e visualizações de dados na web.


Sugestão:

1. Se achar que o jogo está lento, mesmo na velocidade 'warp' máxima, é possível alterar seu valor em "var base = Math.pow(1.5, warp);";
2. Se achar que o jogo tá difícil ou fácil demais, é possível alterar o tamanho da raquete em "paddle = { w: 80, h: 10,...";
3. Se desejar aumentar a área do jogo, modifique na linha abaixo (largura, altura):
  "var cv = sk.createCanvas(400, 300).parent('jogoArea');"


19 Interface Experimental

JSPlotly para Arduino e aquisição de dados de condutivimetria (EM13CNT201, EM13CNT308, M13CNT301, M13CNT302)

  JSPlotly foi inicialmente concebido para a construção de objetos virtuais de aprendizagem interativos. Contudo, é possível integrá-lo a uma interface para placas microcontroladoras (ex: Arduino, ESP32, Rapsberry pi), elevando exponencialmente sua aplicação para experimentação real e projetos STEAM experimentais.
  O exemplo abaixo ilustra uma aplicação para aquisição/controle em tempo real por navegador. O setup apresenta uma leitura de dados de condutividade em solução aquosa contendo teores crescentes de NaCl (0 a 5% p/v). Foi utilizado uma placa Arduino Uno R3 com conexão Web Serial por USB a notebook rodando um aplicativo autônomo para JSPlotly. A condutividade foi obtida por um sensor TDS comercial (sólidos dissolvidos totais) com excitação por potencial alternado de onda quadrada (PWM) para minimizar efeitos de polarização, e script adaptado do fabricante. O sensor TDS opera em faixa de 3,3 a 5,0 V (input) com saída de 0 a 2,3 V, e corrente de 3 a 6 mA.


Exemplo de aplicação de JSPlotly para interfaceamente com Arduino. O gráfico apresenta medidas de condutividade em meio aquoso com medidor TDS para teores crescentes de NaCl (sonda no canto esquerdo). Clique na imagem para obter o aplicativo JSPlotly autônomo para condutividade.

Instruções:

  1. Para conexão Web Serial é necessário instalação de Python ao computador (Windows ou Linux), e setup de servidor local. Para Windows baixe e instale o arquivo oficial para Python, lembrando-se de clicar em Add Python to PATH, e digite os comandos no CMD dentro da pasta do aplicativo autônomo. Segue a orientação para Linux:
    1. Conecte o Arduino e componentes (sonda TDS, recipiente com água e sal);
    1. Copie, cole e rode o script do fabricante para TDS na IDE do Arduino conectado;
    1. Feche a IDE do Arduíno;
    1. Abra um Terminal na pasta do aplicativo autônomo do JSPlotly para Arduino (condutiv_JSPlotly.html);
    1. Digite: python3 -m http.server
    1. Abra o html autônomo do circuito no Chrome (nunca no Firefox);
  A leitura deverá iniciar em instantes. Caso não ocorra, verifique se a taxa de transferência para a IDE do Arduino confere com a do aplicativo (115200 bauds).


Sugestão:

1. Como o aplicativo é escrito no JSPlotly, é possível personalizá-lo para diversas situações, como taxa de tranferência de dados, traços (tipo, cores, espessura), tipo de gráfico, entre outros.


De volta ao topo