html`
<div style="width: ${width}; height: 480px">
<three-game autorender>
<three-scene background-color="#aa0000">
<three-directional-light intensity="0.5" position="10, 20, 30"></three-directional-light>
<three-mesh scale="5" onupdate="dt => this.object.rotation.y = this.object.rotation.x += 1.8 * dt">
<three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
<three-mesh-standard-material color="orange"></three-mesh-standard-material>
</three-mesh>
<three-mesh scale="7" onupdate="dt => this.object.rotation.x = this.object.rotation.x += 1.8 * dt">
<three-box-geometry></three-box-geometry>
<three-mesh-standard-material color="orange"></three-mesh-standard-material>
</three-mesh>
<three-orbit-controls></three-orbit-controls>
</three-scene>
</three-game>
</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.
