The end-to-end solution for building and hosting better data apps, dashboards, and reports.
<p>Hello, World!</p>
<p>Hello, World!!!</p>
a = 10
b = a * 2
<style>
/* Write CSS here */
.myDiv {
color: blue;
}
.myDiv h1 {
font-size: 60px;
}
</style>
<div class='myDiv'>
<h1> HTML is neat!</h1>
<p> It's what all your websites are built in at the end of the day.</p>
<div>
<p>Whoa! I'm writing HTML!!!!!!!! </p>
</div>
<h3>HTML is</h3>
<ul>
<li>Fun</li>
<li>Cool</li>
<li>Old</li>
</ul>
</div>
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.</p>`
carsData
X
weight (lb)
Y
economy (mpg)
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
dot
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>`;
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.
