1. Não requer instalação;
2. Não requer requisitos complementares (ex: bibliotecas ".NET Microsoft", "Java");
3. Não requer conexão de rede;
4. Não requer configuração de máquina de mínimo desempenho (ex: memória RAM);
5. Pode ser carregado a partir de um simples visualizador de HTML ("Firefox", "Edge", "Safari", "Chrome");
6. Não requer um editor específico para construção, podendo ser elaborado a partir de um simples bloco de notas;
7. Possui código-fonte e produto contidos em um mesmo arquivo, facilitando armazenamento e compartilhamento;
8. Pode ser carregado a partir de computador, dispositivos móveis (smartphone) ou removíveis (pendrive);
9. É interpretado a partir de um código de texto simples, utilizando memória física desprezível (20kB), ainda que permita a elaboração de gráficos sofisticados, interativos e dinâmicos (atualização por evento de usuário ou em tempo real);
10. Por ser passível de construção em editor simples de texto, possui compartilhamento irrestrito de seu código-fonte;
11. É capaz de produzir gráficos 2D e 3D interativos instantaneamente, e tanto a partir de equações, como de dados inseridos pelo usuário;
12. É capaz de produzir mapas interativos, elevando a extensão de uso para aplicações não matemáticas;
13. Correlaciona-se diretamente ao uso de linguagens de programação, tal como requerido pela "4a. e 5a. Revolução Industrial", e respectivamente espelhados nas competências digitais da "Educação 4 e 5.0";
14. Por sua simplicidade como arquivo único em HTML, pode ser incorporado em páginas da web ou ambientes virtuais, permitindo seu uso para qualquer modalidade de ensino-aprendizagem (ex: presencial, híbrido, remoto, EaD);
15. Insere-se nos conceitos de "pesquisa reproduzível" bem como de "ensino reprodutível", alicerçados pelo acesso e compartilhamento abertos, facilitados e documentados, para ferramentas digitais direcionadas a conteúdos científico, bem como das matrizes curriculares;
16. Permite que se incorpore no código-fonte outras bibliotecas em "JavaScript", complementares à produção e manejo gráficos (ex: "numjs" para computação numérica e álgebra linear, "jsmath" para notações matemáticas complexas, "jStat" para computação estatística);
18. Possui diversas ações interativas por cliques de mouse, e que pontuam um grau lúdico à experimentação de funções matemáticas;
19. Renderiza gráficos a partir de linguagem de programação moderna e largamente utilizada, o que também permite ao aprendiz sua inserção paulatina em técnicas de programação contidos em outras linguagens recorrentes ("Python", "R"), e do mundo "geek" (Arduino - "C/C++").
20. Pode ser livremente editado e compartilhado para fins específicos junto à licença Creative Commons CC BY-NC 4.0.JSPlotly e Simulação Interativa
JSPlotly é um aplicativo para criação de gráficos interativos e dinâmicos à simulação de fenômenos naturais baseados em equações e visualização de dados. Seu nome deve-se à principal linguagem utilizada em sua construção bem como para a produção dos gráficos, JavaScritpt, bem como a biblioteca envolvida nessa, Plotly.js.
1 Vídeo de apresentação
Segue um pequeno vídeo de apresentação do JSPlotly e do GSPlotly (gerador de códigos), pontuando algumas de suas habilidades.
O JSPlotlsy permite a reprodução, modificação, criação e compartilhamento de gráficos e painéis interativos em 2D ou 3D, juntamente a seus códigos. Foi concebido como uma alternativa simples, rápida, aberta, lúdica, reprodutível e compartilhável ao ensino-aprendizagem e pesquisa.
Oportuniza o letramento e apropriação para expressões científicas envolvidas em fenômenos naturais, pela visualização resultante da manipulação paramétrica da simulação. O aplicativo possui menos de 20 kB, pode ser personalizado em editor de texto, não requer conexão, roda em qualquer sistema operacional, e tanto para desktops como para dispositivos móveis, exporta o gráfico com preservação de sua interatividade, e permite inserção em páginas web.
O JSPlotly foi idealizado tendo-se em mente facilitar ao máximo a construção e compartilhamento de gráficos interativos para ensino-aprendizagem e pesquisa. Gráficos estão presentes em virtualmente qualquer conteúdo ou livro-texto de ciências naturais e matemática, e constituem uma das formas mais ascertivas para comunicação de dados e comportamentos naturais. Em especial, gráficos permitem modelar tal comportamento, pela simulação de um fenômeno a partir da equação que o envolve.
Tendo a função matemática descritora desse comportamento, é possível simulá-lo com base em parâmetros e variáveis que a compõe e, tão importante quanto, observar seu comportamento sob alteração desses valores. Dessa forma, agrega-se valor ímpar à apropriação do conteúdo técnico-científico apresentado pelo gráfico, quando permitida sua manipulação paramétrica 1.
2 Características do JSPlotly
O programa possui diversas características encontradas em outros tantos no mercado, bem como algumas habilidades que o distinguem desses, a saber:
3 Uso e funcionalidades do JSPlotly
O aplicativo é intuitivo, possuindo em sua interface apenas uma janela dividida entre um editor de códigos e o ecrã gráfico. Abaixo do editor existem botões autoexplicativos, permitindo-se:
1. Adicionar um gráfico ("add plot");
2. Remover o último gráfico ("remove last");
3. Limpar a área gráfica ("clean plot");
4. Salvar o gráfico em formato interativo ("save HTML");
5. Salvar o código ("save script");
6. Limpar o editor ("clean script") Segue uma imagem da tela de abertura do programa (e única, também !)
Na parte superior existem ícones padrão da saída gráfica de Plotly.js. Contudo, ao produzir o gráfico default do aplicativo, surgem mais quatro ícones específicos. Da direita para a esquerda:
1. Ícone para mudança de cor da curva ("change color");
2. Ícone para armazenamento opcional da figura ("PNG or SVG");
3. Ícone para visualização de linha pontilhadas das
coordenadas do dado ("Toggle Spike Lines");
4. Ícone para modificar o gráfico no editor online próprio do desenvolvedor ("Edit in Chart Studio")
Frente ao propósito de permitir interatividade para a ferramenta, acrescenta-se à sua funcionalidade:
1. Rolagem dos eixos cartesianos (direita ou esquerda);
2. Ampliação ou redução do gráfico por rolagem com botão
do meio do mouse;
3. Etiquetagem de eixos gráficos por simples clique nos títulos;
4. Modo escuro opcional (canto sup. esquerdo).3.1 Detalhes
Como produto de fusão da linguagem “JavaScript com sua biblioteca gráfica Plotly.js, o programa possui diversas funcionalidades comuns a essas para a construção de um gráfico interativo, e outras tantas agregadas, destacando-se:
1. Efeito de afastamento/aproximação visual 1. geral ou de área específica ("zoom");
2. Arraste do ecrã de visualização ("pan", panorâmica);
3. Deslocamento individual de eixos;
4. Retorno à configuração original ("reset");
5. Seleção de dados/pontos individuais ou coletivos por ("box" ou "lasso");
6. Informações por passagem de mouse ("hover" ou "mouse over"; ex: exibição dinâmica de valores);
7. Dicas customizáveis de ferramentas ("tooltips");
8. Legendas interativas;
9. Gráficos dinâmicos (atualização automática em fluxo);
10. Navegação detalhada ("drill1.down"; exploração em área específica);
11. Botões personalizados no ("buttons");
12. Eventos personalizados por mouse ou ação de usuário ("callbacks", atualização de página por interação);
13. Deslizadores ("sliders") e menus para filtragem de informações;
14. Marcação de dados por linhas pontilhadas nos eixos gráficos e "hover" ("Toggle Spike Lines");
15. Menu de ícones para interatividade padrão ("Mode bar");
16. Personalização do "Mode bar" (ex: exportação da imagem em SVG, cópia de dados do gráfico para a área de transferência);
17. Animações em "layout" ou transição de dados;
18. Facetas interativas ("facets", gráficos lado a lado);
19. Sincronização entre gráficos interconectados ("zoom" e seleção de dados);
20. Criação de paineis dinâmicos interativos ("dashboards");
21. Integração com bibliotecas interativas ("D3.js" e "React.js") ou analíticas (ex: "numjs", "mathjs", "jstat").
Além disso, dada as peculiaridades da linguagem e da biblioteca, também permite:
1. Observar a sintaxe da biblioteca "Plotly.js" por meio de uma equação pré-definida no carregamento do arquivo HTML do aplicativo ("função quadrática");
2. Carregar uma nova função para plotagem ("browser");
3. Editar parâmetros da equação, tanto de sua função matemática e das variáveis inseridas, quanto da configuração do plot;
4. Plotar o gráfico ("Add Plot") e observar seus dados interativamente, por "hover" de mouse;
6. Alterar alguma informação no editor (variáveis, parâmetros, função matemática, eixos, por ex), e superimpor um novo gráfico, para visualização das diferenças propostas e estudo do comportamento da função ("Add Plot");
6. Alterar a cor do último plot por simples clique de mouse em ícone ("change color") em barra de ferramentas;
7. Excluir da área gráfica a última equação ("Remove Last"), para novos ajustes e superimposição de outra curva;
8. Limpar a área gráfica ("Clean Plot");
9. Armazenar o gráfico como um arquivo HTML autônomo ("self-contained"), preservando a interatividade da biblioteca "Plotly.js" para estudo posterior ou compartilhamento do(s) gráfico(s) representados ("Save Plot");
10. Armazenar a equação como um "script" de "JavaScript" e "Plotly.js", para carregamento posterior ou compartilhamento ("Save Script");
11 Armazenar o plot alternativamete como PNG (rasterizada - web, documentos) ou SVG (vetorial - qualidade de publicação, edição) por clique de mouse em ícone da barra;
12. Excluir todos os elementos gráficos e de "script" para uma nova edição ("Clean All");
13. Desfazer/refazer em níveis ilimitados para comandos de edição de um gráfico;
14. Inserir um cursor de coordenadas por linha pontilhada no gráfico ("Toggle Spike Lines") por ícone da barra de ferramentas;
15. Autoescalonar o gráfico por ícone da barra ("Autoscale"), ou por clique duplo do mouse no ecrã;
16. Deslocar o gráfico no ecrã por ícone da barra ("Pan");
17. Ampliar qualquer área retangular sobre o gráfico por ícone da barra ("Zoom");
18. Deslocar o eixo "x" ou "y" por arraste de mouse;
19. Ampliar ou reduzir o gráfico pelo botão "scroll" do mouse (rolagem);
20. Inserir rótulos para título e eixos, por simples clique nas respectivas áreas do gráfico;
21. Clicar na legenda para ocultar/apresentar cada linha/dados do gráfico;
22. Optar por visual claro/escuro (ícone de lua/sol);
23. Editar o gráfico em aplicativo web [Plotly Chart Studio](https://chart-studio.plotly.com/create/#/)
do desenvolvedor da biblioteca por ícone da barra de ferramentas ("Edit in Chart Studio").
4 JSlotly - Download
5 Uso do JSPlotly no site Bioquanti
1. Selecione a opção para gráficos correlatos à "Bioquímica" ou ao "Ensino Básico" no menu lateral;
2. Escolha um tema de interesse, e clique no gráfico para visualizar o aplicativo. Uma nova janela se abrirá contendo o "JSPlotly" específico para o tema escolhido;
4. Agora basta clicar em "Add Plot" para visualizar o gráfico e testar as várias possibilidades de interatividade;
5. Siga as sugestões do "Quadro" para um melhor aproveitamento do tema escolhido.Notas de rodapé
Schneedorf, J.M. JSPlotly: um aplicativo para gráficos interativos em Bioquímica para visualizadores HTML. Revista de Ensino de Bioquímica. 2025 (no prelo).↩︎