Random Scatter

_.md

[ Launch: Random Scatter ] 8646608 by mkessy

config.json

{"description":"Random Scatter","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var margins = {top: 100, right: 100, bottom: 120, left: 120};

var width = tributary.sw - margins.left - margins.right,
    height = tributary.sh - margins.top - margins.bottom;

var svg = d3.select("svg"),
    n = 30, // number of points
    r = 4; // circle radius

function makeData(n) {
  
  var randomX = d3.random.normal(width/2, 100);
         
  var points = d3.range(n-1).map(function() {
    var x = randomX(),
        randomY = function() { return height - d3.random.normal(x*height/width, 30)(); };
    
    return [x, randomY()];
    });
  
  var makeOutlier = function() {
    var x = randomX()+width/7,
        y = height - d3.random.normal(x*height/width/2, 10)();
    return [x, y, true]
  };
    return points.concat([ makeOutlier() ]); 
}
                             
var xScale = d3.scale.linear()
	.domain([0, width])
	.range([0, width]);

var yScale = d3.scale.linear()
	.domain([0, height])
	.range([height, 0]);

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickValues([])
	.tickSize(0,0);

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickValues([])
	.tickSize(0,0);

var gChart = svg.append("g")
	.attr("class", "g-chart")
	.attr("transform", "translate("+margins.left+","+margins.top+")")

gChart.append("g")
	.attr("class", "x axis")
	.call(xAxis)
	.attr("transform", "translate(0,"+height+")");

gChart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

// inital set up
var data = makeData(n);
gChart.selectAll(".point").data(data)
.enter().append("circle")
	.attr("class", "point")
	.style("fill-opacity", 1e-6)
	.attr({r: r, cx: function(d) { return d[0]; }, cy: function(d) { return d[1]; } })
    .classed("outlier", function(d) { return d[2]; })
    .transition()
    .style("fill-opacity", 0.7);

var rectHeight = 20,
    rectWidth = 1.5;

var margX = gChart.selectAll(".marginal-x").data(data)
.enter().append("rect")
	.attr("class", "marginal-x")
    .attr({y: height-rectHeight/2, x: function(d) { return d[0]; }, width: rectWidth, height: rectHeight })
    .classed("outlier", function(d) { return d[2]; });

var margY = gChart.selectAll(".marginal-y").data(data)
.enter().append("rect")
	.attr("class", "marginal-y")
	.attr({y: function(d) { return d[1]; }, x: -rectHeight/2, width: rectHeight, height: rectWidth })
.classed("outlier", function(d) { return d[2]; });

var line = d3.svg.line()
.x(function(d) { return d[0]; })
.y(function(d) {return d[1]; });

var outliers = gChart.selectAll(".outlier").data();

var outlierLine = gChart.append("path").datum(outliers)
	.attr("class", "outlier-line")
	.attr("d", line);

function update(n) {
  var data = makeData(n);
  var chart = gChart.selectAll(".point").data(data);
  
  // update
  chart.transition().duration(1000)
  .attr({cx: function(d) { return d[0]; }, cy: function(d) { return d[1]; } });
  
  margX.data(data).transition().duration(1000)
  .attr({x: function(d) { return d[0]; } });
  
  margY.data(data).transition().duration(1000)
  .attr({y: function(d) { return d[1]; } });
   
}

setInterval(update, 3000, n)

style.css

.axis {
  fill: none;
  stroke: black;
}

.body {
  background: white;
}

.point {
  fill: steelblue;
  fill-opacity: .7;
}

path.domain {
  stroke: gray;
}


.marginal-x, .marginal-y {
  fill: gray;
}
.outlier {
  fill: red;
}