Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
html`<p>Por exemplo, eu usei um elemento <i>parágrafo</i>!</p>`
{
const p = document.createElement("p");
p.appendChild(document.createTextNode("Eu também sou um elemento "));
p.appendChild(document.createElement("i")).appendChild(
document.createTextNode("parágrafo")
);
p.appendChild(document.createTextNode("!"));
return p;
}
md`Eu, tabém sou um elemento *parágrafo*.`
md`Meu número favorito é ${(Math.random() * 100) | 0}.`
md`Eu gosto de Markdown para prosa, mas ${tex`\KaTeX`} para matemática.`
md`Um sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} é um gráfico em linha com prosa.`
function sparkline(values, width = 64, height = 17) {
const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);
const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);
const context = DOM.context2d(width, height);
const line = d3.line().x((d, i) => x(i)).y(y).context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
md`A hora atual é ${new Date(now).toLocaleTimeString()}.`
{
const p = md`Arco-íris menos zangados são os *melhores* arco-íris.`;
p.style.color = d3.interpolateRainbow(now / 1000);
return p;
}
{
const context = DOM.context2d(128, 128);
for (let radius = 8; radius < 128; radius += 8) {
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.stroke();
}
return context.canvas;
}
html`<svg width="128" height="128" fill="none" stroke="black">${
d3.range(8, 128, 8).map(radius => `<circle r="${radius}"></circle>`)
}</svg>`
d3 = require("d3@5")
{
// Cria um quadrado <svg> 128px por 128px.
const svg = d3
.create("svg")
.attr("width", 128)
.attr("height", 128);
// Calcula vários raios 128, 120, 112, 104 etc.
const radii = d3.range(128, 0, -8);
// Cria uma sequencia de cores (escuro para pequenos e claro para grandes).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Utiliza o data join do D3 para criar os círculos
const circle = svg
.selectAll("circle")
.data(radii)
.join("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg.node();
}
d3
.create("svg")
.attr("width", 128)
.attr("height", 128)
.call(svg =>
svg
.selectAll("circle")
.data(d3.range(128, 0, -8))
.join("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))
.attr("r", d => d)
)
.node()
{
const fill = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
return html`<svg width="128" height="128">${d3
.range(128, 0, -8)
.map(r => svg`<circle r="${r}" fill="${fill(r)}"></circle>`)}</svg>`;
}
tex`E = mc^2`
tex.block`\Delta E^*_{00} = \sqrt{
\Big(\frac{\Delta L'}{k_LS_L}\Big)^2 +
\Big(\frac{\Delta C'}{k_CS_C}\Big)^2 +
\Big(\frac{\Delta H'}{k_HS_H}\Big)^2 +
R_T
\frac{\Delta C'}{k_CS_C}
\frac{\Delta H'}{k_HS_H}
}`
slider = html`<input type=range>`
slider.type
slider.value
slider.valueAsNumber
viewof value = html`<input type=range>`
value
html`<style> .highlight { background: yellow; } </style>`
html`<p class="highlight">Eu sou um parágrafo .</p>`
slider // Este slider já foi exibido acima!
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.
