Suppoesed to be something meaningful but then I had to come back and do the getting started example. Didn't use d3js for this example at all.
If you like clarity and extensibility A-Frame is probably for you!
Built with blockbuilder.org
xxxxxxxxxx<html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"> <img id="boxTexture" src="https://www.ladybug.tools/images/graph/honeybee.png"> <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"> </a-assets> <a-camera> <a-cursor></a-cursor> </a-camera> <a-box src="#boxTexture" position="0 4 -5" rotation="0 45 45" scale="2 2 2"> <a-animation attribute="position" to="0 5 -15" direction="alternate" dur="2000" repeat="indefinite"></a-animation> <a-animation attribute="rotation" to="0 0 0" direction="alternate" dur="1000" repeat="indefinite"></a-animation> <!-- These animations will start when the box is looked at. --> <a-animation attribute="scale" begin="mouseenter" dur="300" to="0.5 0.5 0.5"></a-animation> <a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"></a-animation> <a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation> </a-box> <a-sky src="#skyTexture"></a-sky> <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30" repeat="20 20"></a-plane> <a-light type="ambient" color="#445451"></a-light> <a-light type="point" intensity="0.5" position="0 2 -3"></a-light> </a-scene> <body></html> https://aframe.io/releases/0.5.0/aframe.min.js