Old school D3 from simpler times

All examples By author By category About

pstuffa

Full window Github gist

Twirl

Another test of my 3D Plugin d3-3d for D3.js.

forked from Niekes's block: d3-3d: 3D Point Cloud

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

https://d3js.org/d3.v4.min.js