D3 Examples - TSNE with R, D3, pixi (40000points)

xxxxxxxxxx
 
<!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://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.10/pixi.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
 
<body>
  <div id="container"></div>
</body>
​
  <script>
    var width = 700;
    var height = 500;
    var x = d3.scale.linear()
    .range([0, width]);
​
        var y = d3.scale.linear()
    .range([height, 0]);
    var color = d3.scale.category20c();
​
        var renderer = new PIXI.WebGLRenderer(800, 600, 
      { antialias: true, backgroundColor : 0xffffff });
        document.body.appendChild(renderer.view);
            
        // create the root of the scene graph
        var stage = new PIXI.Container();
 
    function drawCircle(d,x,y,r,fill) {
      if (typeof fill === "string") {
        fill = parseInt(fill.substring(1), 16);
      }
​
      if (d._graphics) {
        d._graphics.clear();
     } else {
     
      d._graphics = new PIXI.Graphics();
      d._graphics.updateCircle = function(newx,newy) {
        drawCircle(d, newx, newy, r, fill);    
      }
     }
​
      d._graphics.lineStyle(0);
      d._graphics.beginFill(fill, 1);
      d._graphics.drawCircle(x,y,r);
      d._graphics.endFill();
      d._graphics.interactive = true;
      d._graphics.buttonMode = true;
     /* d._graphics.hitArea = new PIXI.Circle(x,y,r);
      d._graphics.click = function(e) {
        this.alpha = 0.5;
      }
     */ 
      // d._graphics.on('mousedown', onDragStart)
      //   .on('touchstart', onDragStart)
      //   // events for drag end
      //   .on('mouseup', onDragEnd)
      //   .on('mouseupoutside', onDragEnd)
      //   .on('touchend', onDragEnd)
      //   .on('touchendoutside', onDragEnd)
      //   // events for drag move
      //   .on('mousemove', onDragMove)
      //   .on('touchmove', onDragMove);
​
      return d._graphics;
    } 
​
        d3.json("myjson.json", function(error, data) {
            if (error) throw error;
      x.domain(d3.extent(data, function(d) { return d.V1; })).nice();
      y.domain(d3.extent(data, function(d) { return d.V2; })).nice();
      data.forEach(function(d) {
         var circle = drawCircle(d, x(d.V1), y(d.V2),1.5 , 0x9933FF);  
                
         stage.addChild(circle);
       });
            renderer.render(stage);
           
    });
  </script>
          
    