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();
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.