Published
Edited
Jun 22, 2020
html`<p>Я - элемент <i>параграфа</i>!</p>`
{
const p = document.createElement("p");
p.appendChild(document.createTextNode("Я также "));
p.appendChild(document.createElement("i")).appendChild(document.createTextNode("параграфа"));
p.appendChild(document.createTextNode(" элемент!"));
return p;
}
md`Я тоже элемент *параграфа*.`
md`Мой любимый номер ${Math.random() * 100 | 0}.`
md`Мне нравится Markdown для прозы, но ${tex`\KaTeX`} для математики.`
md`График ${граф([0, 8, 3, 2, 6, 5, 1, 9, 1, 9])} представляет собой диаграмму, содержащую прозу.`
function граф(values, width = 128, height = 27) {
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`Текущее время ${new Date(now).toLocaleTimeString()}.`
{
const p = md`Раздражающие радуги - это самые *лучшие* радуги.`;
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("https://d3js.org/d3.v5.min.js")
{
// Создать квадрат <svg> 128px на 128px.
const svg = DOM.svg(128, 128);
// Вычислить различные радиусы 128, 120, 112, 104 и т. д.
const radii = d3.range(128, 0, -8);
// Создать последовательную цветовую шкалу (темный для небольших радиусов, яркий для больших).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Использовать объединение данных D3 для создания кругов.
d3.select(svg)
.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg;
}
d3.select(DOM.svg(256, 256))
.call(svg => svg.selectAll("circle")
.data(d3.range(256, 0, -8))
.enter().append("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 256]))
.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">Я - выделенный параграф.</p>`
slider // Этот слайдер уже виден выше!
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.
