Published
Edited
Apr 7, 2019
2 stars
{
const div = html`<div></div>`
const scene = () => lighterhtml.html`
<a-scene style="height: 400px" embedded>
<a-box color="tomato" position="-4 4 -5" color="#4CC3D9"></a-box>
<a-circle color="skyblue" position="-4 8 -14" radius="3"></a-circle>
<a-cone color="#ff9999" position="2 8 -14" radius-bottom="2" radius-top="0" height="5"></a-cone>
<a-cylinder color="green" position="8 7 -14" radius="2" height="5"></a-cylinder>
<a-dodecahedron color="yellow" position="16 6 -14" radius="3"></a-dodecahedron>
<a-icosahedron color="purple" position="-24 4 -14" radius="2"></a-icosahedron>
<a-octahedron color="lightblue" position="-17 4 -14" radius="2"></a-octahedron>
<a-plane color="#333" position="-12 3 -14" height="3" width="3"></a-plane>
<a-ring color="teal" position="-8 3 -14" radius-inner="1" radius-outer="2"></a-ring>
<a-sphere color="coral" position="-2 2 -14" radius="3"></a-sphere>
<a-tetrahedron color="#FF926B" position="5 1 -14" radius="4"></a-tetrahedron>
<a-torus-knot color="#B84A39" position="12 0 -14" arc="180" p="2" q="7" radius="2" radius-tubular="0.1"></a-torus-knot>
<a-torus color="#43A367" position="19 -1 -14" arc="310" radius="3" radius-tubular="0.1"></a-torus>
<a-triangle color="#999" position="-25 -1 -14" vertex-a="0 2 0" vertex-b="-2 -2 0" vertex-c="2 -2 0"></a-triangle>
</a-scene>
`
return lighterhtml.render(div, scene)
}
aframe = require('https://unpkg.com/aframe@0.9.0/dist/aframe-master.js')
lighterhtml = import('https://unpkg.com/lighterhtml@0.9.2/esm/index.js?module')
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.
