html`<p>I am a <i>paragraph</i> element!</p>`
{
const p = document.createElement("p");
p.appendChild(document.createTextNode("I am also a "));
p.appendChild(document.createElement("i")).appendChild(document.createTextNode("paragraph"));
p.appendChild(document.createTextNode(" element!"));
return p;
}
md`I, too, am a *paragraph* element.`
md`My favorite number is ${Math.random() * 100 | 0}.`
md`I like Markdown for prose, but ${tex`\KaTeX`} for math.`
md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`
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`The current time is ${new Date(now).toLocaleTimeString()}.`
{
const p = md`Less-angry rainbows are the *best* rainbows.`;
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;
}
{
// styling with CSS
const container = html`<svg width="300" height="300" style="fill: none; stroke: gold;"></svg>`;
const data = [8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120];
const circles = data.map(radius => svg`<circle stroke=${'#'+Math.floor(Math.random()*16777215).toString(16)} cx=${radius} cy=${radius} r="${radius}"></circle>`)
circles.forEach(circle => container.appendChild(circle));
return container
}
d3.range(8, 128, 8)
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")
{
// Create a square <svg> 128px by 128px.
const svg = d3.create("svg").attr("width", 128).attr("height", 128);
// Compute various radii 128, 120, 112, 104 etc.
const radii = d3.range(128, 0, -8);
// Create a sequential color scale (dark for small radii, bright for large).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Use D3’s data join to create circles.
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
viewof value = html`<input type=range>`
value
html`<style> .highlight { background: yellow; } </style>`
html`<p class="highlight">I am a highlighted paragraph.</p>`
slider // This slider is already visible above!
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.
