Twirl by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-3d.js"></script>

<style> 
      
    body {
        background: #ffab00 !important;
        font-family: "Helvetica Neue", Arial;
        font-weight: 100;
        font-size: 50px;
    }
</style>

<body>
<svg ></svg>
<script>
  
  var data = []
  	, min = max = 50
  	, n = 400
  	, width = window.innerWidth
  	, height = window.innerHeight
  	, origin  = [width/2, height/4]
    , startAngle = Math.PI / 9
    , beta = startAngle;

  var svg   = d3.select('svg')
      .attr("width", width)
      .attr("height", height)
      .append('g');
  
    var color = d3.scaleOrdinal()
      .range(["#007f7e", "#ffab00", "#ff6500", "#018d73", "#ff4700"])

    var rn = function(min, max){ return Math.round(d3.randomNormal(min, max + 1)()); };
    var mx, mouseX;
	
  data = createData(n);
	

  function createData(n) {
    var startData = []
    for (var i = n; i >= 0; i--) {
      startData.push({
        x: rn(-min, max),
        y: rn(-min, max),
        z: rn(-min, max)
      });
    }
		return startData;
  }
  
  
    var _3d = d3._3d()
        .scale(2)
        .origin(origin)
        .rotateX(startAngle)
        .rotateY(startAngle)
        .primitiveType('POINTS');

    var data3D  = _3d(data);
    var extentZ = d3.extent(data3D, function(d){ return d.rotated.z });
    var zScale  = d3.scaleLinear().domain([extentZ[1]+10, extentZ[0]-10]).range([1, 8]);

  
  
  
  
  
  	d3.interval(function(elapsed) { 
      beta = elapsed / 800 * -1;
      processData(_3d.rotateY(beta + startAngle)(data));
      processData(_3d.rotateZ(beta + startAngle)(data));
    }, 1)
 
  
    function processData(data){

        var points = svg.selectAll('circle').data(data, function(d, i) { return i});
      
        points
            .enter()
            .append('circle')
            .merge(points)
            .attr('fill',   function(d, i){ return color(i); })
            .attr('stroke', function(d, i){ return d3.color(color(i)).darker(0.5); })
            .attr('cx', function(d){ return d.projected.x; })
            .attr('cy', function(d){ return d.projected.y; })
            .attr('r' , function(d){ return zScale(d.rotated.z); })
              .on("mouseenter", function() {
               d3.select(this)
               .transition()
               .duration(5000)
               .ease(d3.easeElastic)
               .attr("r", function() { return 100*Math.random() })
               .style("stroke-dasharray", "2, 3, 4, 5, 6")
               .transition()
               .duration(1000)
               .ease(d3.easeLinear)
               .style("stroke-dasharray", "4, 5, 6, 7, 8")
               .style("opacity", .01)
               .duration(1000)
               .transition().remove()
              })

        points.exit().remove();
    }

    processData(data3D);
</script>
</body>

d3-3d.js

!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(t.d3=t.d3||{})}(this,function(t){"use strict";function r(t,r,e,n){var o=Math.cos(r),u=Math.sin(r),a=Math.cos(e),d=Math.sin(e),c=Math.cos(n),i=Math.sin(n),f=o*d*i-u*c,p=o*d*c+u*i,y=u*a,x=u*d*i+o*c,h=u*d*c-o*i,s=-d,z=a*i,j=a*c;return{x:o*a*t.x+f*-t.y+p*t.z,y:y*t.x+x*-t.y+h*t.z,z:s*t.x+z*-t.y+j*t.z}}function e(t,r,e,n,o){return r===x.ortho?{x:e[0]+n*t.x,y:e[1]+n*t.y}:r===x.persp?{x:e[0]+n*t.x/(t.z+o),y:e[1]+n*t.y/(t.z+o)}:void 0}function n(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f];p.rotated=r({x:p.x,y:p.y,z:p.z},o,u,a),p.projected=e(p.rotated,n,d,c,i)}return t}function o(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f],y=p[0],x=p[1];y.rotated=r({x:y.x,y:y.y,z:y.z},o,u,a),x.rotated=r({x:x.x,y:x.y,z:x.z},o,u,a),y.projected=e(y.rotated,n,d,c,i),x.projected=e(x.rotated,n,d,c,i),p.lng=Math.sqrt(Math.pow(x.rotated.x-y.rotated.x,2)+Math.pow(x.rotated.y-y.rotated.y,2)+Math.pow(x.rotated.z-y.rotated.z,2)),p.midPoint={x:(y.x+x.x)/2,y:(y.y+x.y)/2,z:(y.z+x.z)/2}}return t}function u(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function a(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function d(t,n,o,u,a,d,c,i){for(var f=t.length-1;f>=0;f--){var p=t[f],y=p[0],x=p[1],h=p[2];y.rotated=r({x:y.x,y:y.y,z:y.z},o,u,a),x.rotated=r({x:x.x,y:x.y,z:x.z},o,u,a),h.rotated=r({x:h.x,y:h.y,z:h.z},o,u,a),y.projected=e(y.rotated,n,d,c,i),x.projected=e(x.rotated,n,d,c,i),h.projected=e(h.rotated,n,d,c,i),p.area=1}return t}function c(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function i(t,r,e,n,o,u,a,d){for(var c=t.length-1;c>=0;c--);return t}function f(t){return"M"+t.projected.x+","+t.projected.y+"m"+-t.radius+",0a"+t.radius+","+t.radius+",0,1,1,"+2*t.radius+",0a"+t.radius+","+t.radius+",0,1,1,-"+2*t.radius+",0"}function p(t){return"M"+t[0].projected.x+","+t[0].projected.y+"L"+t[1].projected.x+","+t[1].projected.y}function y(t){return"M"+t[0].projected.x+","+t[0].projected.y+"L"+t[1].projected.x+","+t[1].projected.y+"L"+t[2].projected.x+","+t[2].projected.y}var x={ortho:"ortho",persp:"persp"},h=function(){function t(t){return M[v](t,e,j,l,g,h,s,z)}var r=x.ortho,e=(x.persp,r),h=[0,0],s=1,z=1,j=0,l=0,g=0,v="POINTS",M={POINTS:n,LINES:o,LINES_LOOP:u,LINES_STRIP:a,TRIANGLES:d,TRIANGLES_STRIP:c,TRIANGLES_FAN:i},I={POINTS:f,LINES:p,TRIANGLES:y};return t.projection=function(r){return arguments.length?(e=r,t):e},t.origin=function(r){return arguments.length?(h=r,t):h},t.scale=function(r){return arguments.length?(s=r,t):s},t.distance=function(r){return arguments.length?(z=r,t):z},t.rotateZ=function(r){return arguments.length?(j=r,t):j},t.rotateY=function(r){return arguments.length?(l=r,t):l},t.rotateX=function(r){return arguments.length?(g=r,t):g},t.primitiveType=function(r){return arguments.length?(v=r,t):v},t.draw=function(t){return I[v](t)},t};t._3d=h,Object.defineProperty(t,"__esModule",{value:!0})});