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.

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 Contexto - 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.

2 Matemática Financeira

2.1 Contexto - 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 Contexto - 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.

4 Física

4.1 Contexto - 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.

4.2 Contexto - 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 Química

5.1 Contexto - 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.

5.2 Contexto: 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 Biologia

6.1 Contexto - Modelo de Crescimento Populacional com Fase Lag (EM13CNT102)

  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);

6.2 Contexto - 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 Geografia

7.1 Contexto: 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.

7.2 Contexto: 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).

8 História

8.1 Contexto - 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.

8.2 Contexto - 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 Linguagens

9.1 Contexto - 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.

9.2 Contexto - 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 Diagramas e Fluxogramas

  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.

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

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).

10.2 Contexto: Fluxograma para o ciclo da água (EF06CI03, EF06CI04, EM13CNT103, EM13CNT202)

Sugestões:

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.

11 Artes

11.1 Contexto - 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.

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

11.2 Contexto - 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

12 Animação

  Assim como simulações, animações podem auxiliar na compreensão de um tema específico. O JSPlotly não trabalha diretamente com animações como o faz a biblioteca Plotly.js, pois isso exige alteração do código-fonte que foge à proposta de ensino-aprendizagem e pesquisa pretendidos (inserção de frames, buttons, transitions, por ex). Não obstante, é possível simular uma animação com vistas a melhorar o aprendizado de um tema, por inserção de 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 plo, é 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).

13 STEAM

13.1 Contexto - 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 Contexto - 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 !

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

  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;
• 2. Inicie o jogo (jogue/false, verificar/false);
• 3. Clique no botão add plot e será exibido um quadro de pares numéricos para memorização;
• 4. Troque para jogue/true, clique em clean plot, e depois em add plot. O quadro será exibido agora apenas com um valor (demais células mostratrão “?”);
• 6. Escolha verificar/true, clique em clean plot, e depois em add plot. Será apresentado um campo para se digitar as coordenadas em que se acredita estar o outro par numérico (Ex: A2);
• 7. 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.