Computer Graphics & Visualization @ufrj.br
//
// Uma célula JavaScript
//
(100 + 5) * 2
h20 = //
// Outra célula JavaScript
//
{
// Série harmônica com n termos
const n = 20;
let soma = 0;
for (let k = 1; k <= n; k++) soma += 1 / k;
return soma; // <- Valor da célula
}
Uma célula Markdown
Markdown = linguagem de mark-up
Gera conteúdo Html com uma sintaxe simplificada
Mais detalhes em markdownguide.orghttps://www.markdownguide.org/
<h2>Uma célula <i>HTML</i></h2>
<ul>
<li>Linguagem de mark-up nativa dos navegadores</li>
<li>Sintaxe baseada em XML</li>
<li>Inúmeros recursos para aprendizado</li>
<ul><li>Ex.: <a href="https://www.w3schools.com/html/">W3 Schools</a></li></ul>
</ul>
//
// Usando tagged templates para gerar markdown
//
md`## Tagged templates permitem gerar _markdown_ em JS`
//
// Usando tagged templates para gerar html
//
html`<h2>... e também conteúdo <i>html</i></h2>`
JavaScript+MD+HTML
Também é possível usar fórmulas JavaScript em conteúdos html ou Markdown.
Por exemplo, sabemos que 1+1=${1+1}.
Outros tagged templates úteis
LaTeX: ${tex`\sqrt{\frac{1+1}{1+1}}=1`}
GraphViz:
${dot`
digraph {
A -> B
A -> C
}`}
SVG:
${svg`<svg width=200 height=50 >
<rect fill=red stroke=blue width=30 height=30 />
<text x=40 y=20>Hello world!</text>
<line x1=15 y1=25 x2=180 y2=25 stroke=gray />
</svg>`}
a = 1 + 1
b = a + 2
c = a * b
viewof numero = htl.html`<input type=number min=0 max=100 step=1 value=5>`
numero * 8
viewof x = Inputs.number([0, 100], { step: 1, value: 5, label: "x" })
viewof tamanho = Inputs.range([0, 100], { step: 1, value: 5, label: "tamanho" })
viewof bicho = Inputs.radio(["cão", "gato", "cavalo", "papagaio"], {
label: "bicho",
value: "cão"
})
viewof letra = Inputs.select("ABCDEFG", { label: "letra", value: "A" })
[x, tamanho, bicho, letra]
{
for (let i = 0; ; i++) {
yield i; // <- yield ao invés de return
}
}
{
let pat = [];
for (let k = 0; ; k++) {
yield html`<pre style="line-height:120%">${pat.join("\n")}`;
if (k % 30 != 0) continue; // <- Pula alguns quadros da animação
let s = "";
for (let i = 0; i < 50; i++) s += "╱╲"[~~(Math.random() * 2)];
pat.push(s);
if (pat.length > 20) pat.shift();
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
