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;
}
html`<svg viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>`
{
// styling with CSS
const container = html`<svg width="128" height="128" style="fill: none; stroke: red;"></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 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!
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.