Documentação completa

Gerador de Gráficos Científicos

Tudo que você precisa para criar, personalizar e exportar gráficos de funções matemáticas com qualidade de publicação, diretamente no navegador.

Visão Geral

O Gerador de Gráficos Científicos é uma ferramenta que permite plotar funções matemáticas de f(x) de forma interativa. Ele utiliza Chart.js para renderização e math.js para avaliar expressões matemáticas, o que significa que você pode escrever equações em notação matemática natural.

Principais recursos:

  • Suporte a múltiplas funções simultaneamente, cada uma com cor e rótulo próprios
  • Escalas linear e logarítmica para ambos os eixos
  • 8 temas de cores científicos (Matplotlib, Seaborn, Nature, etc.)
  • Exportação em PNG ou JPEG com resolução configurável (1×, 2× HD, 3× UHD)
  • 10 exemplos prontos para explorar funcionalidades rapidamente
  • Controle preciso de estilo: espessura de linha, marcadores, preenchimento de área, fonte

Interface

A tela é dividida em duas áreas principais:

Esquerda
Painel lateral (sidebar)

Contém todos os controles de configuração, organizados em seções colapsáveis. Clique no cabeçalho de qualquer seção para abrí-la ou fechá-la.

Direita
Área principal

Exibe a barra de ferramentas (toolbar) no topo, o canvas do gráfico ao centro, e a barra de status com mensagens e coordenadas na parte inferior.

Seções do painel lateral

  • Funções — define as equações a plotar (aberta por padrão)
  • Domínio e Eixos — intervalo de x, limites de y, passo e escalas
  • Títulos e Legenda — textos e posição da legenda
  • Estilo Visual — cores, espessura, fontes e opções de renderização
  • Dimensões da Imagem — tamanho e resolução para exportação
  • Exemplos Prontos — atalhos para configurações pré-definidas

As seções começam fechadas para que o botão Gerar gráfico fique visível logo ao abrir a página. Você pode abrir qualquer seção a qualquer momento clicando em seu cabeçalho.

Primeiro Gráfico

O caminho mais rápido do zero ao gráfico:

  1. A seção Funções já estará aberta com sin(x) preenchido. Se quiser outra função, basta digitar no campo Equação.

  2. Clique no botão azul ▶ Gerar gráfico no final do painel lateral.

  3. O gráfico aparece imediatamente na área principal. A barra de status (rodapé da área principal) confirma quantos pontos foram calculados.

  4. Para exportar, clique em ↓ Baixar PNG ou ⎘ Copiar para copiar a imagem para a área de transferência.

Passe o cursor sobre o gráfico para ver o valor de x exibido na barra de status. Um tooltip exibe os valores de todas as funções naquele ponto.

ƒ Funções

A seção Funções é o coração da ferramenta. Cada função é representada por um bloco com três campos:

  • Equação — a expressão matemática em termos de x
  • Rótulo — texto exibido na legenda do gráfico
  • Cor — cor da curva (seletor de cor)

Adicionar e remover funções

Por padrão, a página inicia com uma única função. Para adicionar mais:

  • Clique no botão + Adicionar função (com borda tracejada) abaixo da lista de funções.
  • Uma nova função é criada com equação padrão x e a próxima cor do tema ativo.
  • Para remover, clique no botão ✕ Remover dentro do bloco da função (aparece apenas quando há mais de uma).

Você pode plotar até 8 funções com cores distintas (número de cores por tema). A partir da 9ª, as cores se repetem ciclicamente.

Sintaxe de equações

As expressões são avaliadas pelo math.js. A variável independente é sempre x. Você pode usar:

# Operadores aritméticos
x + 2        # soma
x - 2        # subtração
x * 3        # multiplicação (não pode omitir o *)
x / 4        # divisão
x^2          # potenciação
x^(1/3)      # raiz cúbica via expoente fracionário

# Constantes
pi           # π ≈ 3.14159…
e            # e ≈ 2.71828…

# Exemplos completos
2*x^2 - 3*x + 1
exp(-x^2 / 2) / sqrt(2*pi)
sin(2*x) + cos(x/2)
1 / (1 + exp(-x))   # função logística (sigmoide)

A multiplicação nunca pode ser implícita. Escreva 2*x, não 2x. Da mesma forma, sin(x)cos(x) é inválido; use sin(x)*cos(x).

Referência de Funções

Guia detalhado das funções suportadas pelo motor math.js. Além da sintaxe, cada grupo traz explicações sobre o que a função representa e como combiná-la para criar curvas fisicamente interessantes. A variável independente é sempre x; letras como A, T, φ representam constantes numéricas que você escolhe.

Funções Trigonométricas

Radianos, não graus. Todas as funções trigonométricas do math.js recebem e devolvem ângulos em radianos. Se você está acostumado a graus, basta multiplicar o ângulo por pi/180 antes de passar à função:

# Plotar seno em graus (x vai de 0 a 360)
sin(x * pi / 180)

# Plotar cosseno em graus
cos(x * pi / 180)

Para esse caso, configure x mínimo = 0 e x máximo = 360 e você verá um ciclo completo com os valores familiares de 0°, 90°, 180°, 270° e 360° no eixo horizontal.

Ângulos notáveis em radianos:

GrausRadianos (exato)Sintaxe no app
30°π/6pi/6
45°π/4pi/4
60°π/3pi/3
90°π/2pi/2
180°πpi
270°3π/23*pi/2
360°2*pi

Controlando amplitude, período e fase. Uma onda genérica é escrita como:

A * sin(2*pi*x / T + phi)

onde:

  • A — amplitude (altura máxima da onda). A = 2 dobra a altura.
  • T — período (comprimento de um ciclo completo no eixo x). T = 2*pi é o período natural do seno; T = 1 faz um ciclo por unidade de x.
  • phi — fase inicial (desloca a curva horizontalmente). phi = pi/2 transforma sin em cos.
# Onda com amplitude 3, período 4 e fase π/4
3 * sin(2*pi*x / 4 + pi/4)

# Batimento entre duas ondas de frequências próximas
sin(10*x) + sin(11*x)

# Onda quadrada aproximada (primeiros harmônicos de Fourier)
sin(x) + sin(3*x)/3 + sin(5*x)/5 + sin(7*x)/7
SintaxeDescriçãoValor em pontos chave
sin(x)Seno — oscila entre −1 e 1, vale 0 em x = 0sin(pi/2) = 1 · sin(pi) = 0
cos(x)Cosseno — oscila entre −1 e 1, vale 1 em x = 0cos(0) = 1 · cos(pi) = −1
tan(x)Tangente — cresce sem limite, tem assíntotas em ±π/2, ±3π/2, …tan(pi/4) = 1
cot(x)Cotangente — equivalente a cos(x)/sin(x)cot(pi/4) = 1
sec(x)Secante — equivalente a 1/cos(x)sec(0) = 1
csc(x)Cossecante — equivalente a 1/sin(x)csc(pi/2) = 1
asin(x)Arco-seno — inverso do seno, domínio [−1, 1], resultado em radianos no intervalo [−π/2, π/2]asin(1) = π/2
acos(x)Arco-cosseno — inverso do cosseno, domínio [−1, 1], resultado em [0, π]acos(0) = π/2
atan(x)Arco-tangente — domínio todos os reais, resultado em (−π/2, π/2)atan(1) = π/4

tan(x), sec(x) e csc(x) têm assíntotas verticais onde o denominador é zero. Para plotá-las, desative Suavizar curva e use interpolação Linear, ou restrinja o domínio para evitar os pontos singulares.

A função exp(x) — exponencial natural

exp(x) significa , ou seja, o número de Euler e (≈ 2,718) elevado à potência x. É chamada de "exponencial natural" porque e é a base que torna a derivada de eˣ igual a ela mesma — uma propriedade única e fundamental no cálculo.

Você também pode escrever diretamente e^x no app e obterá o mesmo resultado. A forma exp(x) é preferida por ser mais legível em expressões longas e evitar ambiguidades com a constante e.

SintaxeO que representaValor em x = 0
exp(x)Crescimento exponencial — duplica a cada ln(2) ≈ 0,693 unidades1
exp(-x)Decaimento exponencial — cai para zero conforme x cresce1
exp(-x^2)Sino gaussiano centrado na origem — base da distribuição normal1 (máximo)
1 - exp(-x)Saturação exponencial — parte de 0 e satura em 1 (carregamento de capacitor, por ex.)0
# Crescimento versus decaimento
exp(x)           # cresce rapidamente para x > 0
exp(-x)          # decresce rapidamente para x > 0

# Oscilador amortecido: onda que perde energia com o tempo
exp(-0.3*x) * sin(4*x)

# Distribuição normal (gaussiana) com média 0 e desvio padrão σ = 1
exp(-x^2 / 2) / sqrt(2*pi)

# Distribuição normal com média μ = 2 e desvio padrão σ = 0.5
exp(-(x - 2)^2 / (2 * 0.5^2)) / (0.5 * sqrt(2*pi))

Para crescimento/decaimento com meia-vida , use exp(-log(2)/t_meio * x). Por exemplo, para uma substância com meia-vida de 5 anos: exp(-log(2)/5 * x).

Logaritmos

O logaritmo responde à pergunta: "a qual expoente preciso elevar a base para obter este número?". Se exp(3) ≈ 20,09, então log(20.09) ≈ 3 — o logaritmo é a operação inversa da exponencial.

Atenção à notação: no math.js, log(x) é o logaritmo natural (base e), também chamado de ln(x) nos livros de física e matemática. Para o logaritmo de base 10 (o "log" das calculadoras científicas), use log10(x).

SintaxeSignificado matemáticoExemplo
log(x)Logaritmo natural — base e ≈ 2,718. Também escrito ln(x). Domínio: x > 0.log(e) = 1 · log(1) = 0
log10(x)Logaritmo base 10 — base das escalas de decibéis (dB), pH e magnitude estelar. Domínio: x > 0.log10(100) = 2 · log10(1000) = 3
log2(x)Logaritmo base 2 — natural em informática (bits). Domínio: x > 0.log2(8) = 3 · log2(1) = 0
log(x, b)Logaritmo em qualquer base b. Útil para bases como 3, 5, etc.log(81, 3) = 4

Propriedades importantes para escrever equações:

# Lei de Beer-Lambert (absorbância óptica)
log10(1 / x)             # absorbância em função da transmitância x

# Escala de decibéis (intensidade sonora)
10 * log10(x / 1e-12)    # dB, com referência de 10⁻¹² W/m²

# Entropia de Shannon (bit por símbolo)
-x * log2(x) - (1-x) * log2(1-x)

# Conversão de base: log base 5 via fórmula da mudança de base
log(x) / log(5)          # equivalente a log(x, 5)

O logaritmo só é definido para x > 0. Se o domínio incluir zero ou valores negativos, os pontos correspondentes serão automaticamente omitidos do gráfico (aparecem como lacunas na curva). Configure x mínimo como um valor pequeno positivo, como 0.001.

Funções Hiperbólicas

As funções hiperbólicas são análogas às trigonométricas, mas definidas a partir da exponencial em vez de círculos. Aparecem frequentemente em soluções de equações diferenciais, catenárias (formato de cabos suspensos), relatividade especial e redes neurais.

SintaxeDefinição via exponenciaisAplicação típica
sinh(x)(exp(x) − exp(−x)) / 2Ondas em meios dispersivos
cosh(x)(exp(x) + exp(−x)) / 2 — mínimo em x=0, sempre ≥ 1Formato de catenária: cosh(x)
tanh(x)sinh(x)/cosh(x) — varia entre −1 e 1, sigmoide "suave"Função de ativação em redes neurais
asinh(x)Inverso de sinh — domínio: todos os reais
acosh(x)Inverso de cosh — domínio: x ≥ 1
atanh(x)Inverso de tanh — domínio: −1 < x < 1

Potências, Raízes e Valor Absoluto

SintaxeDescriçãoExemplo / Observação
x^2Quadrado de xParábola
x^3Cubo de x — função ímpar, passa pela origem
x^(-1)Inverso de x (hipérbole) — equivalente a 1/xAssíntota em x = 0
x^0.5Raiz quadrada — equivalente a sqrt(x). Domínio: x ≥ 04^0.5 = 2
sqrt(x)Raiz quadrada — mais legível que x^0.5. Domínio: x ≥ 0sqrt(9) = 3
cbrt(x)Raiz cúbica — funciona para x negativo, ao contrário de x^(1/3)cbrt(-8) = −2
nthRoot(x, n)Raiz n-ésima — para n par, domínio: x ≥ 0nthRoot(x, 4)
abs(x)Valor absoluto |x| — "dobra" o eixo negativo sobre o positivo, criando um Vabs(-3) = 3
sign(x)Sinal de x: retorna −1 para x<0, 0 para x=0, 1 para x>0Função degrau: (sign(x)+1)/2
floor(x)Arredonda para baixo — cria uma função escada descendentefloor(2.9) = 2
ceil(x)Arredonda para cima — cria uma função escada ascendenteceil(2.1) = 3
round(x)Arredonda para o inteiro mais próximoround(2.5) = 3
mod(x, n)Resto da divisão de x por n — gera padrões periódicos com dente de serramod(x, 2*pi)
min(a, b)Menor entre dois valores — útil para criar "tetos"min(x^2, 4)
max(a, b)Maior entre dois valores — útil para criar "pisos"max(sin(x), 0)

x^(1/3) pode dar resultados inesperados para x negativo em alguns contextos (retorna NaN). Prefira cbrt(x) sempre que precisar da raiz cúbica de valores negativos.

Combinações Úteis em Física e Matemática

Estas não são funções primitivas — são expressões completas que você pode copiar e colar diretamente no campo de equação:

NomeEquaçãoOnde aparece
Gaussiana (normal) exp(-x^2 / 2) / sqrt(2*pi) Estatística, mecânica quântica, óptica
Gaussiana com σ e μ exp(-(x-2)^2 / (2*0.5^2)) / (0.5*sqrt(2*pi)) Distribuição normal com média μ=2, desvio σ=0,5
Lorentziana 1 / (1 + x^2) Perfil de linhas espectrais, ressonância
Lorentziana com largura γ (0.5) / (x^2 + (0.5)^2) Espectroscopia — substituir 0.5 pela meia-largura
Sigmoide (logística) 1 / (1 + exp(-x)) Redes neurais, crescimento limitado por capacidade
Oscilador amortecido exp(-0.2*x) * cos(3*x) Mola com atrito, circuito RLC subamortecido
Batimento cos(9*x) * cos(x) Superposição de ondas de frequências próximas
Catenária cosh(x) Formato de cabo suspenso entre dois pontos
Função degrau de Heaviside (sign(x) + 1) / 2 0 para x<0, 1 para x≥0 — sistemas causais
Pulso retangular (sign(x+1) - sign(x-1)) / 2 1 no intervalo [−1, 1], 0 fora — forma de pulso
Onda triangular abs(mod(x, 2) - 1) Oscila entre 0 e 1 com período 2
Onda quadrada (Fourier) sin(x) + sin(3*x)/3 + sin(5*x)/5 + sin(7*x)/7 Aproximação com os primeiros harmônicos ímpares
Potencial de Lennard-Jones (1/x)^12 - 2*(1/x)^6 Interação entre moléculas — mínimo em x=1
sinc (normalizado) sin(pi*x) / (pi*x) Difração de fenda simples, processamento de sinal

Para o sinc, o ponto x=0 é uma indeterminação 0/0 cujo limite é 1. O math.js retornará NaN nesse ponto exato, causando uma lacuna no gráfico. Isso é esperado — a curva estará correta em todos os outros pontos.

Constantes disponíveis

SímboloValorObservação
piπ ≈ 3,14159265358979Use 2*pi para um ciclo completo
ee ≈ 2,71828182845905Base da exponencial natural

Domínio e Eixos

Intervalo de x

Defina x mínimo e x máximo para controlar o domínio de plotagem. O padrão é −10 a 10.

Limites de y

Os campos y mínimo e y máximo são opcionais. Deixados em branco (auto), o Chart.js ajusta automaticamente com base nos valores calculados. Preencha para fixar o eixo vertical, útil quando a função possui assíntotas.

Passo da curva

Controla a resolução de amostragem: a cada passo unidades de x, um ponto é calculado. O padrão é 0.01.

  • Menor passo → curva mais suave, mais pontos calculados (mais lento para intervalos grandes)
  • Maior passo → curva mais grosseira, mas geração mais rápida

Para um intervalo [−100, 100] com passo 0.001, seriam gerados 200.000 pontos por função. Isso pode deixar o navegador lento. Prefira aumentar o passo para intervalos grandes.

Títulos dos eixos

Preencha Título eixo X e Título eixo Y para adicionar rótulos aos eixos. Os padrões são x e f(x).

Escala logarítmica

Os seletores Escala eixo X e Escala eixo Y permitem alternar entre escala Linear e Logarítmica.

Em escala logarítmica, o domínio de x deve ser estritamente positivo. Use, por exemplo, x mínimo = 0.01. Valores negativos ou zero causam comportamento indefinido.

T Títulos e Legenda

Título e subtítulo

Título principal aparece centralizado acima do gráfico. O Subtítulo é opcional e, quando preenchido, aparece como segunda linha imediatamente abaixo do título principal.

Posição da legenda

Escolha onde exibir a legenda das séries:

  • Topo — acima das curvas (padrão)
  • Rodapé — abaixo do eixo X
  • Esquerda / Direita — lateral ao gráfico
  • Ocultar — remove a legenda completamente

Estilo Visual

Temas de cores

Oito temas definem a paleta de cores atribuída automaticamente às funções. Ao trocar o tema, as cores de todas as séries são atualizadas imediatamente:

TemaInspiração / Uso indicado
CientíficoAzul escuro, vermelho e verde — visual sóbrio para artigos
MatplotlibPaleta padrão do Matplotlib (Python) — familiar para cientistas
SeabornVariação suave do Matplotlib, pastel e agradável
NaturezaTons de azul, verde e laranja com alto contraste
EscuroCores vibrantes sobre fundo escuro — altere a cor de fundo para #1a1814
MonocromáticoTons de cinza — impressão em preto e branco
JHEPPaleta inspirada no Journal of High Energy Physics
NaturePaleta inspirada nas revistas Nature e Science

Cores personalizadas

Além do tema, você pode ajustar três cores de base do gráfico:

  • Cor de fundo — cor do canvas (padrão: branco)
  • Cor dos eixos / grade — cor das linhas de grade e bordas dos eixos
  • Cor do texto — cor dos rótulos dos eixos, título e ticks

Cada série também possui seu próprio seletor de cor individual, no bloco da função na seção Funções.

Espessura das linhas

O slider controla a largura de todas as curvas em pixels. O valor atual é exibido ao lado. Valores recomendados: 1.5 para gráficos densos, 2.5 a 3 para apresentações.

Fonte do gráfico

Selecione a família tipográfica usada no título, rótulos dos eixos e ticks. Opções: IBM Plex Mono, Georgia, Arial, Times New Roman, Courier New e Helvetica Neue.

Opções visuais (checkboxes)

OpçãoDescrição
Mostrar gradeExibe linhas de grade no fundo do gráfico. O eixo zero recebe destaque automático.
Grade secundáriaAdiciona subdivisões menores entre as linhas principais da grade.
Mostrar pontos marcadosExibe marcadores nos pontos de amostragem. O estilo e tamanho são definidos na Barra de Ferramentas.
Preencher área sob a curvaPinta a área entre a curva e o eixo x com a cor da série (semi-transparente por padrão).
Preenchimento opacoAumenta a opacidade do preenchimento de área. Só tem efeito se "Preencher área" estiver ativo.
Suavizar curvaAplica interpolação cúbica entre os pontos, resultando em curvas mais arredondadas. Desative para funções com descontinuidades.

Barra de Ferramentas

A toolbar fica acima do canvas e oferece controles adicionais de estilo que se aplicam a todas as séries simultaneamente.

Estilo de linha

  • Sólida — linha contínua (padrão)
  • Tracejada — sequência de traços longos
  • Pontilhada — sequência de pontos

Marcador

Forma do marcador exibido nos pontos de amostragem quando Mostrar pontos marcados está ativo:

  • Círculo, Quadrado, Triângulo, Cruz, Estrela, Traço

Tamanho do marcador

Slider de 0 a 12 px que define o raio dos marcadores. O valor 0 oculta os marcadores.

Interpolação

ModoComportamento
MonotônicaSpline que preserva monotonia — recomendada para a maioria das funções
LinearSegmentos de reta entre os pontos — mais rápido, sem suavização adicional
DegrauTransição abrupta após cada ponto — útil para funções constantes por partes
Degrau ant.Transição abrupta antes de cada ponto

Para funções com descontinuidades (como 1/x ou tan(x)), desative Suavizar curva e use interpolação Linear para evitar artefatos visuais na descontinuidade.

Dimensões da Imagem

Formatos predefinidos

O seletor Formato predefinido preenche automaticamente os campos Largura e Altura com dimensões comuns:

FormatoDimensãoUso recomendado
1200 × 8003:2Artigos e relatórios impressos
1600 × 90016:9Slides e apresentações
1000 × 10001:1Posts quadrados (redes sociais)
1400 × 10504:3A4 paisagem
900 × 12003:4A4 retrato
2400 × 16003:2Alta resolução / impressão grande

Resolução de exportação (DPI)

  • 1× (tela) — tamanho nominal, adequado para web
  • 2× (HD) — dobra os pixels, ideal para telas Retina e impressões médias (padrão)
  • 3× (UHD) — três vezes os pixels, para impressão em alta qualidade

Um gráfico de 1200 × 800 em resolução 2× gera uma imagem de 2400 × 1600 pixels, equivalente a ~203 DPI numa impressão A4. Use 3× para impressão em formatos maiores ou quando o gráfico precisar de texto muito nítido.

Formato de exportação

  • PNG — sem perda de qualidade, suporta transparência, arquivos maiores
  • JPEG — compressão com perda leve, arquivos menores, fundo sempre sólido

Exemplos Prontos

A seção Exemplos Prontos contém 10 configurações pré-definidas que carregam automaticamente funções, intervalo de x e título. Úteis para explorar funcionalidades ou como ponto de partida.

ExemploFunções incluídas
Parábolax^2
Trig. básicasin(x) e cos(x)
Exponencialexp(x) e exp(-x)
Funções loglog(x) e log10(x)
Equação de ondaHarmônicos sin(x − π/2), sin(2x), sin(3x)
Hipérbole1/x
Série de Taylorsin(x) e sua aproximação polinomial
Funções potência√x, x^(1/3) e
Oscilador amor.e^(−0.3x)·sin(3x)
GaussianaDistribuição normal padrão

Ao aplicar um exemplo, as funções e o intervalo de x são substituídos, mas as configurações de estilo, dimensão e títulos personalizados são preservados.

Exportação

Baixar imagem

O botão ↓ Baixar PNG (ou JPEG, conforme o formato selecionado) salva o gráfico diretamente no seu computador. O arquivo é nomeado grafico.png (ou grafico.jpeg). A imagem inclui o fundo branco (ou a cor configurada), independente das configurações do sistema.

Copiar para área de transferência

O botão ⎘ Copiar copia a imagem do gráfico como PNG para a área de transferência. Em seguida, você pode colá-la diretamente em documentos Word, Google Slides, e-mails ou editores de imagem.

A função Copiar requer permissão do navegador para acessar a área de transferência. No Firefox, pode ser necessário habilitar a permissão manualmente. No Safari, o suporte é limitado.

! Erros Comuns

f1: sintaxe inválida
A equação contém um erro de sintaxe. Verifique: multiplicação implícita (2x2*x), parênteses desbalanceados, nome de função incorreto.

Intervalo de x inválido
O valor de x mínimo é maior ou igual ao máximo, ou os campos estão em branco.

Passo inválido
O campo Passo da curva está em branco ou com valor zero/negativo.

Gráfico em branco ou curva invisível
Possíveis causas: a função retorna NaN ou Infinity em todo o domínio (ex: log(x) com x mínimo negativo), ou a escala automática de y está muito ampla. Tente fixar os limites de y manualmente.

Curva com "salto" indesejado perto de uma assíntota
Funções como 1/x e tan(x) têm descontinuidades. Desative Suavizar curva e use interpolação Linear para reduzir o artefato. O Chart.js liga os pontos adjacentes à descontinuidade com uma linha vertical — isso é comportamento esperado.

Botão "Copiar" não funciona
Alguns navegadores exigem que a página seja servida via HTTPS para acessar a API de clipboard. Em uso local (arquivo HTML aberto diretamente), use o botão Baixar PNG como alternativa.