The avatar for @tophtucker
Toph Tucker
Published
Testing / Helping
Edited
Jan 19, 2022
4 stars
Insert cell
Insert cell
myList = [1, 2, 3]
Insert cell
Insert cell
chart = svg`<svg width="${width}" height="20">
<circle r="10" cx="${width / 2}" cy="10" />
</svg>`
Insert cell
Insert cell
chart
Insert cell
chart.getBoundingClientRect().width
Insert cell
chart.outerHTML
Insert cell
Insert cell
chart2 = {
const x = (width / 2) * Math.sin(now / 1000);

// this logs the value of x to the cell below
// every time the cell runs, which happens
// whenever `now` changes
mutable debug = x;

return svg`<svg width="${width}" height="20">
<g transform="translate(${width / 2}, 10)">
<circle r="10" cx="${x}" />
</g>
</svg>`;
}
Insert cell
mutable debug = null
Insert cell
Insert cell
prettier = require("prettier@2", "prettier@2/parser-html.js")
Insert cell
~~~html
${prettier.format(chart2.outerHTML, {
parser: "html",
plugins: [prettier]
})}
~~~
Insert cell
Insert cell
Insert cell
chart.__proto__
Insert cell
Insert cell
new DocumentFragment()
Insert cell
Insert cell

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.
Learn more