D3 Examples - Twirl

xxxxxxxxxx
 
<!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>
​
    