NYT budget visualization

[Kyle Foreman]

The NYT has a cool visualization of the 2013 US budget proposal, using d3:  http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

First time I've seen them going with SVG over Flash!

[Josh]

So I'm trying to create something similar to this, I've gotten the
basics down (with help from http://vallandingham.me/bubble_charts_in_d3.html
and others), but I can't quite figure out how to replicate the
functionality in the NYT visualization that sorts the nodes into a
hierarchy of change categories. Could anyone point me in the right
direction here? Thanks!

[Kyle Foreman]

Is this what you mean? In line 1231 of the source:

categorizeChange: function(c){
	if (isNaN(c)) { return 0;
	} else if ( c < -0.25) { return -3;
	} else if ( c < -0.05){ return -2;
	} else if ( c < -0.001){ return -1;
	} else if ( c <= 0.001){ return 0;
	} else if ( c <= 0.05){ return 1;
	} else if ( c <= 0.25){ return 2;
	} else { return 3; }
	}

[Kyle Foreman]

And that gets worked into the sorting:

totalSort: function(alpha) {
	var that = this;
	return function(d){
	var targetY = that.centerY;
	var targetX = that.width / 2;
	if (d.isNegative) {
	if (d.changeCategory > 0) {
	d.x = - 200
	} else {
	d.x = 1100
	}
	}
	d.y = d.y + (targetY - d.y) * (that.defaultGravity + 0.02) * alpha
	d.x = d.x + (targetX - d.x) * (that.defaultGravity + 0.02) * alpha
	};
	};

and the buoyancy of the bubbles:

buoyancy: function(alpha) {
	var that = this;
	return function(d){
	var targetY = that.centerY - (d.changeCategory / 3) * that.boundingRadius
	d.y = d.y + (targetY - d.y) * (that.defaultGravity) * alpha * alpha * alpha * 100
	};
	},

[Josh]

So I guess I'm not quite sure what the 'buoyancy' in the code
translates to in the realm of d3

[Kyle Foreman]

The buoyancy function just returns y values of the circles:

buoyancy: function(alpha) {

    var that = this;

    return function(d){

        var targetY = that.centerY - (d.changeCategory / 3) * that.boundingRadius

        d.y = d.y + (targetY - d.y) * (that.defaultGravity) * alpha * alpha * alpha * 100

    };

}