3D Plot w/ makeshift clustering

_.md

[ Launch: 3D Plot ] 4362d540cd54973b38a3 by Dan-Nolan
[ Launch: 3D Plot ] 3cb6b17f20f619ad86d1 by Dan-Nolan
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"3D Plot w/ makeshift clustering","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"points.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var height = 400;
var width = 400;

var data = [];
for(var i = 0; i < 6500; i++) { 
  data.push({
    x: Math.round(Math.random() * 400), 
    y: Math.round(Math.random() * 400)
  })
}

function clusterData(data) {
  var clusters = [];
  for(var x = 0; x < width; x=x+80) {
    for(var y = 0; y< height; y=y+80) {
      var cluster = { x: 0, y: 0, points: 0}
      data.forEach(function(point) { 
        if(x < point.x && x + 20 > point.x
           && y < point.y && y + 20 > point.y) {
          var totalPoints = cluster.points + 1;
          cluster.x = Math.round((cluster.x * cluster.points + point.x) /totalPoints);
          cluster.y = Math.round((cluster.y * cluster.points + point.y) /totalPoints);
          cluster.points = totalPoints;
        }
      });
      if(cluster.points !== 0) {
      	clusters.push(cluster);
      }
    }
  }
  return clusters;
}

var data = clusterData(data)

var x = d3.scale.linear()
		.range([0, height])
		.domain([0, 400])

var y = d3.scale.linear()
		.range([0, width])
		.domain([0, 400])

var brush = d3.svg.brush()
			.x(x)
			.y(y)
			.extent([-200,200])
			.on('brushend', highlightPoints)

var g = d3.select('svg').append("g")
.classed('plot', true)
brush(g)
g.attr("transform", "translate(114, 28)")
g.selectAll(".background")
  .style({fill: "#4B9E9E", visibility: "visible"})
g.selectAll(".extent")
  .style({fill: "#78C5C5", visibility: "visible"})
g.selectAll(".resize rect")
  .style({fill: "#276C86", visibility: "visible"})

var points = data

d3.select('g.plot')
	.append('g')
.attr('transform', 'translate(0,0)')
	.selectAll('circle')
	.data(points)
	.enter()
	.append('circle')
.attr({ 
  r: function(d) { return d.points},
  cx: function(d) { console.log(d.x); return d.x },
  cy: function(d) { return d.y }
})

var pointGs = d3.select('svg')
	.append('g')
	.classed('grid', true)
    .attr({
      transform: "translate(485, 45)"
    })
	.selectAll('g.grid')
	.data(data)
	.enter()
	.append('g')

pointGs.append('rect')
.attr({ 
  width: 106,
  height: 27,
  fill: 'white',
  x: 39,
  y: function(d,i) { return i * 50 -21}
}).on('click', function(d) {
 	d3.selectAll('circle')
    .filter(function(c) { 
      	return c.x === d.x
    })
    .attr({ 
      fill: "yellow"
    })
});

pointGs.append('text')
.text(function(d) { return d.x })
.attr({ 
  fill: 'black',
  x: 50,
  y: function(d,i) { return i * 50 }
});
	
pointGs.append('text')
.text(function(d) { return d.y })
.attr({ 
  fill: 'black',
  x: 100,
  y: function(d,i) { return i * 50 }
});
	

function highlightPoints() {
  var e = brush.extent();
  d3.selectAll('circle').attr({ fill: 'white' }).filter(function(d,i) {
      return e[0][0] > d["x"] || d["x"] > e[1][0]
          || e[0][1] > d["y"] || d["y"] > e[1][1];
  }).attr({ fill: 'black' })
  
  pointGs.selectAll('rect').attr({ fill: '#573dff' })
  
  pointGs.filter(function(d,i) {
      return e[0][0] > d["x"] || d["x"] > e[1][0]
          || e[0][1] > d["y"] || d["y"] > e[1][1];
  }).selectAll('rect').attr({ fill: 'white' })
}

points.tsv