# Gráficos e diagramas

Typst e DOT dentro de uma página MDX.

Página: https://resumos.rgo.pt/exemplo/diagramas/

## Um gráfico com CeTZ-Plot

Este gráfico compara $n$ e $n^2$. Mostra funções matemáticas, não medições de programas reais. Para $n = 10$, os valores são 10 e 100.

![Gráfico de n e n ao quadrado entre zero e dez. A função linear termina em 10 e a quadrática em 100.](https://resumos.rgo.pt/exemplo/diagramas/figura-1.svg)

O ficheiro usa [CeTZ](https://typst.app/universe/package/cetz/) e [CeTZ-Plot](https://typst.app/universe/package/cetz-plot/). O SVG mantém a nitidez quando aumentas o zoom.

```
import Typst from '../../../components/Typst.astro';
import grafico from '../../exemplo/crescimento.typ?raw';

<Typst source={grafico} format="svg" alt="Descrição do gráfico" />
```

## Um diagrama com Fletcher

[Fletcher](https://typst.app/universe/package/fletcher/) permite desenhar caixas e setas em Typst. Este exemplo representa um programa em três passos.

![Ler dados, depois calcular, depois mostrar o resultado.](https://resumos.rgo.pt/exemplo/diagramas/figura-2.svg)

## Uma árvore com DOT

DOT descreve as ligações entre os nós. O Graphviz escolhe a posição de cada um. Aqui temos uma pequena árvore de pesquisa binária.

![Árvore com raiz 8. À esquerda, 3 tem os filhos 1 e 6. À direita, 10 tem o filho 14.](https://resumos.rgo.pt/exemplo/diagramas/figura-3.svg)

```
digraph Pesquisa {
  8 -> 3; 8 -> 10;
  3 -> 1; 3 -> 6;
  10 -> 14;
}
```

### Um bloco escrito em Typst

Podemos incluir texto, listas e equações de um ficheiro `.typ` dentro de uma página MDX.

A soma dos primeiros <math><mi>𝑛</mi></math> números naturais é:

<math display="block"><munderover><mo lspace="0em">∑</mo><mrow><mi>𝑘</mi><mo lspace="0em" rspace="0em">=</mo><mn>1</mn></mrow><mi>𝑛</mi></munderover><mi>𝑘</mi><mo>=</mo><mfrac><mrow><mi>𝑛</mi><mrow><mo>(</mo><mrow><mi>𝑛</mi><mo>+</mo><mn>1</mn></mrow><mo>)</mo></mrow></mrow><mn>2</mn></mfrac></math>

*   O texto continua selecionável.
*   As equações usam MathML.
*   Os diagramas podem ser exportados para SVG.

## Um vídeo

Este vídeo da série de álgebra linear do 3Blue1Brown explica vetores. É um exemplo de vídeo incorporado, independente dos diagramas acima.

[Vídeo: Vetores: a essência da álgebra linear, 3Blue1Brown](https://www.youtube.com/watch?v=fNk_zzaMoSs)

A miniatura vem do YouTube. O vídeo só carrega quando clicas. [Abrir no YouTube](https://www.youtube.com/watch?v=fNk_zzaMoSs)

## Experimenta

Abre o [ficheiro desta página no GitHub](https://github.com/rodrgds/resumos/blob/main/src/content/lessons/exemplo/diagramas.mdx) e os [ficheiros Typst e DOT](https://github.com/rodrgds/resumos/tree/main/src/content/exemplo). Muda as funções, os nós ou as cores e volta a construir o site.