Old school D3 from simpler times

All examples By author By category About

richelleross

Full window Github gist

spheres

Built with blockbuilder.org

forked from anonymous's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: D3-copy-Enjalot

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

forked from rvross's block: spheres

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  
   <a-scene>
     <a-entity position="1 2 0">
      <a-sphere position="0 2 -1" radius="1" color="red"></a-sphere>
       </a-entity>
     
     
     <a-entity position="3 4 0">
     <a-sphere position="5 0 0" radius="2.52" color="blue"></a-sphere>
       </a-entity>
      <a-light color="#da47da" position="0 0 0" type="ambient"></a-light>
     
     <a-entity position="12 4 0">
     <a-sphere position="5 0 0" radius="2.65" color="#fff400"></a-sphere>
       </a-entity>
     <a-entity position="19 4 -1">
     <a-sphere position="5 0 0" radius="1.3" color="#fff100"></a-sphere>
       </a-entity>
  
 
     
      <a-entity light="type: point; color: #EEE; intensity: 0.75" position="0 3 0"></a-entity>
     <a-entity position="3 3 6" rotation="0 0 0">
    	 <a-entity camera look-controls wasd-controls></a-entity>
     </a-entity>
    	
      
      <a-sky color="black"></a-sky>
  </a-scene>
  
  <script>

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  
   <a-scene>
     <a-entity position="1 2 0">
      <a-sphere position="0 2 -1" radius="1" color="red"></a-sphere>
       </a-entity>
     
     <!--Venus-->
     <a-entity position="3 4 0">
     <a-sphere position="5 0 0" radius="2.52" color="blue"></a-sphere>
       </a-entity>
      <a-light color="#da47da" position="0 0 0" type="ambient"></a-light>
     <!--Earth-->
     <a-entity position="12 4 0">
     <a-sphere position="5 0 0" radius="2.65" color="#fff400"></a-sphere>
       </a-entity>
     <a-entity position="19 4 -1">
     <a-sphere position="5 0 0" radius="1.3" color="#fff100"></a-sphere>
       </a-entity>
  
 
     
      <a-entity light="type: point; color: #EEE; intensity: 0.75" position="0 3 0"></a-entity>
     <a-entity position="3 3 6" rotation="0 0 0">
         <a-entity camera look-controls wasd-controls></a-entity>
     </a-entity>
        
      <!-- Sky -->
      <a-sky color="black"></a-sky>
  </a-scene>
  
  <script>
​
    
  </script>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://aframe.io/releases/latest/aframe.min.js