Public
Edited
Jun 29, 2024
3 forks
10 stars
`テキストをバックオートで囲んで入力します`
md`バーックオートの前に「*md*」を追加することで、マークダウン形式を使ってテキストを記述することもできます。`
tex`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`
4 * 100
{
let x = 0;
for (let i = 1; i <= 100; ++i) {
x += i;
}
return x;
}
hogeValue = 12
hogeValue * 2
`私の出身地は${prefecture}${city}です`
prefecture = "群馬"
city = "前橋市"
i = {
let i = 0;
while (true) {
yield ++i;
}
}
md`常に変化し続ける値「${i}」を、ドキュメントの中に埋め込むことができます。`
date = {
while (true) {
yield new Promise(resolve => {
setTimeout(() => resolve(new Date), 1000);
});
}
}
d3 = require("https://d3js.org/d3.v5.min.js")
html`<p>ここでは、入力された<font color="red">HTML要素</font>がそのまま表示されています。<p>`
html`<p>svg要素を埋め込むこともできます。<p>
<svg>
<circle cx="50" cy="50" r="20" fill="red" stroke="gray"/>
<circle cx="90" cy="70" r="20" fill="green" stroke="gray" />
<circle cx="250" cy="50" r="20" fill="blue" stroke="gray"/>
</svg>
`
DOM
{
// 128px X 128pxサイズのSVGエレメントをセル内に生成.
const svg = DOM.svg(128, 128);
// 128pxから0pxまで、step8で半径サイズを生成.
const radii = d3.range(128, 0, -8);
// 連続したカラースケールを生成 (半径が大きくなるほど明るく).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// D3.jsを使ってサークル要素を生成.
d3.select(svg)
.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg;
}
md`## HTMLのUI要素を使う`
slider = html`<input type="range" max="100" min="0">`
md`スライダーの値は${slider.value}`
viewof r_slider = html`<input type="range" max="100" min="0">`
md`スライダーの値は${r_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.
