Old school D3 from simpler times

All examples By author By category About

Utopiah

Full window Github gist

VRLab Brussels members vs active

Built with blockbuilder.org

<!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/0.5.0/aframe.min.js"></script>
  <title>VRLab Brussels members vs active</title>
</head>

<body>
  
   <a-scene>
     <a-sphere position="0 -13 0" radius="10" color="yellow"></a-sphere>
     <a-obj-model src="vrlab.obj" color="yellow" scale="0.1 0.1 0.1" rotation="90 -90 0" position="15 -5 -5">
 <a-animation attribute="position" from="15 -7 -5" to="15 -3 -5" dur="3500" repeat="indefinite" fill="forwards" direction="alternate"></a-animation>
</a-obj-model>
     <a-entity position="0 0.5 0" rotation="0 -120 0">
    	 <a-entity camera look-controls wasd-controls>
    <a-cursor></a-cursor>
</a-entity>
     </a-entity>
      
      <a-sky color="black"></a-sky>
  </a-scene>
  
  <script>
    // cf D3+3D: using d3.js with AFrame https://www.youtube.com/watch?v=Tb2b5nFmmsM
    // should check first that the scene is actually loaded
    
//    var all = [0, 27, 39, 42, 50, 57, 60, 65, 69];
//    var active = [0, 27, 39, 42, 50, 46, 40, 42, 43];
var all =[1, 1, 1, 12, 24, 27, 31, 32, 34, 36, 37, 38, 39, 40, 40, 41, 41, 41, 41, 42, 42, 44, 44, 45, 46, 48, 50, 50, 52, 55, 55, 55, 56, 57, 57, 57, 58, 60, 60, 60, 60, 61, 62, 64, 64, 65, 65, 65, 66, 66, 67, 67, 68, 68, 69, 69, 69, 71, 71, 73, 73, 73, 73, 75, 76, 76, 76, 77, 77, 78, 79, 80, 81, 82, 83, 83, 84, 84, 85, 89, 92, 95, 95, 96, 96, 96, 97, 97, 98, 101, 103, 106, 108, 110, 110, 110, 111, 114, 114, 115, 117, 118, 120, 121, 122, 125, 127, 129, 131, 132, 134, 137, 139, 142, 144, 144, 144, 145, 145, 146, 149, 152, 154, 157, 157, 157, 160, 162, 162, 165, 165, 165, 165, 166, 166, 166, 166, 166, 166, 167, 167, 167, 168, 170, 170, 171, 173, 176, 179, 181, 183, 185, 185, 185, 185, 185];

var active = [1, 1, 1, 12, 24, 27, 31, 32, 34, 36, 37, 38, 39, 40, 40, 41, 41, 41, 41, 42, 42, 44, 44, 45, 46, 48, 50, 50, 52, 55, 55, 55, 56, 46, 42, 41, 42, 44, 43, 41, 40, 40, 40, 42, 42, 42, 42, 42, 44, 44, 45, 43, 44, 43, 43, 42, 41, 43, 42, 41, 41, 41, 40, 42, 43, 43, 39, 36, 36, 37, 38, 38, 37, 34, 35, 34, 35, 35, 35, 39, 41, 44, 43, 44, 44, 44, 45, 44, 45, 44, 46, 50, 52, 51, 51, 50, 51, 55, 56, 57, 55, 54, 54, 53, 54, 61, 63, 65, 68, 67, 67, 67, 69, 75, 77, 77, 76, 77, 77, 76, 77, 78, 79, 82, 81, 79, 81, 81, 81, 84, 82, 79, 79, 78, 77, 74, 71, 70, 68, 68, 67, 66, 67, 63, 60, 58, 60, 62, 65, 66, 66, 68, 66, 60, 60, 61];
    //via https://www.meetup.com/VR-LAB-Brussels/stats/
    
    var scene = d3.select("a-scene");
    
    var hscale = d3.scale.linear()
      .domain([0, d3.max(all)])
      .range([0,15])
    
    var cubes = scene.selectAll("a-box.bar")
      .data(all)
    cubes.enter().append("a-box").classed("bar", true)
    cubes.attr({
      color: "yellow",
      width: 2,
      position: function(d,i) {
        var radius = 50;
        var theta = (i/all.length) * (2 * Math.PI)
        var x = radius * Math.cos(theta);
        var y = hscale(d)/2;
        var z = radius * Math.sin(theta);
        return x + " " + y + " " + z
      },
      rotation: function(d,i) {
        var x = 0;
        var y = -360 * i/all.length;
        var z = 0;
        return x + " " + y + " " + z
      },
      height: function(d,i) {
        return hscale(d)
      }
    })
    
    var activehscale = d3.scale.linear()
      .domain([0, 185])
      .range([0,15])
    
    var activecubes = scene.selectAll("a-box.bar2")
      .data(active)
    activecubes.enter().append("a-box").classed("bar2", true)
    activecubes.attr({
      transparency: true,
      opacity: 0.5,
      color: "red",
      position: function(d,i) {
        var radius = 49;
        var theta = (i/active.length) * (2 * Math.PI)
        var x = radius * Math.cos(theta);
        var y = activehscale(d)/2;
        var z = radius * Math.sin(theta);
        return x + " " + y + " " + z
      },
      rotation: function(d,i) {
        var x = 0;
        var y = -360 * i/active.length;
        var z = 0;
        return x + " " + y + " " + z
      },
      height: function(d,i) {
        return activehscale(d)
      }
    })
    .on("mouseenter", function(d,i) {
      // this event gets fired continuously as long as the cursor
      // is over the element. we only want trigger our animation the first time
      if(this.hovering) return;
      console.log("hover", i,d)
      this.hovering = true;
      d3.select(this).transition().duration(1000)
      .attr({
        metalness: 0.5,
        width: 20
      })
    })
    .on("mouseleave", function(d,i) {
      console.log("leave",i,d)
      this.hovering = false;
      d3.select(this).transition()
      .attr({
        metalness: 0,
        width: 0.5
      })
    })

</script>
</body>

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

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