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

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 Física

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

3 Química

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.

4 Biologia

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

5 Geografia

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.

6 História

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.

7 Linguagens

7.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.
De volta ao topo