Published
Edited
Jun 27, 2019
Insert cell
md`# Simple X3DOM Example (dev)`
Insert cell
x3dom = require('https://x3dom.org/download/dev/x3dom-full.js').catch(() => window.x3dom)
Insert cell
stylesheet = html`<link rel='stylesheet' href='https://x3dom.org/download/dev/x3dom.css'></link>`
Insert cell
reloader = {
// Make it reactive
x3dom.reload();
return x3delement;
}
Insert cell
x3delement = html`
<div style='height: 400px; width: 400px;'>
<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>
`
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