a = 10
b = a * 2
// jsタブでhtmlを書く場合には`htl.html`を使う
htl.html`<p> You can write also write HTML in a JavaScript cell using htl.html! We'll do this often for D3 examples, since we're working with JavaScript when writing D3.`
[1,2,3,4].map(d => d * 2).filter(d => d > 2)
// Remove this and write JS
carsData
X
weight (lb)
Y
economy (mpg)
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
{
const label = d => d.data.node
const root = stratifyTree(getDOMTree(myChart))
return graph(root, {label: label})
}
{
const html = htl.html`<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</div>`
// 最初のpタグの色を変更
// d3.select(html).select("p").style("color", "red");
// d3.select(html).selectAll("p").style("color", "red");
// pタグに配列データを対応させ、それを表示するように変更
d3.select(html)
.selectAll("p")
.data([1,2,3])
.filter((d, i) => i == 1)
.style("color", "red")
.text(d => d)
return html
}
cars
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
