md`## require both x3dom.js and x3dom.css`
x3dom = {
await require('https://x3dom.org/download/dev/x3dom-full.debug.js').catch(() => window.x3dom);
//combine with stylesheet into a single cell since they belong together
return html`<link rel='stylesheet'
href='https://x3dom.org/download/dev/x3dom.css' ></link>`
}
stylesheet = html`<link rel='stylesheet'
href='https://x3dom.org/download/dev/x3dom.css' ></link>`
x3dstyleforobservable = html`
<style>
x3d, X3D {
width: 100%;
height: 100%;
border: none;
}
</style>
`
reloader = {
window.x3dom.reload();
return x3delement; // just to make reactive
}
x3delement=html`
<div style='height:${width / 1.6}px'>
<x3d>
<scene>
<transform scale='2.5 2 2.5' rotation='1 1 0 0.8'>
<shape>
<appearance def='transparent yellow'>
<material diffusecolor='1 1 0' transparency='0.3'>
</material>
</appearance>
<box solid='true'></box>
</shape>
<shape>
<appearance use='transparent yellow'>
</appearance>
<sphere solid='true' radius='1.3'></sphere>
</shape>
</transform>
<scene>
</x3d>
</div>
`
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.
