Built with blockbuilder.org
Last active
June 27, 2017 13:36
-
-
Save Utopiah/461b4aa88086584bf3ae5178c3b76ca7 to your computer and use it in GitHub Desktop.
VRLab Brussels members vs active
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <!-- Sky --> | |
| <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 http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment