tomgp
10/6/2014 - 5:20 PM

hemicycle

index.html
content_copyfile_download
<html>
<head>
	<title>senate 2014 prototype</title>
	<script src="http://bertha.ig.ft.com/view/publish/js/0Ak6OnV5xs-BudGpxUWNKSzExNUdZVklnY21YckprSEE/basic,senate?d=spreadsheet"></script>
	<script src="bower_components/d3/d3.js"></script>
	<script src="hemicycle.js"></script>
	<style type="text/css">
		.noelectionrepublican{
			fill:#ff0000;
		}

		.noelectiondemocratic{
			fill:#0000ff;
		}

		.independent{
			fill:#999;
		}

		.tossup{
			stroke:#ddd;
			fill:none;
		}

		.leandemocratic{
			stroke:#9999FF;
			fill:none;
		}

		.likelydemocratic{
			stroke:#bbbbFF;
			fill:none;		
		}

		.soliddemocratic{
			stroke:#0000FF;
			fill:none;		
		}

		.leanrepublican{
			stroke:#FF9999;
			fill:none;
		}

		.likelyrepublican{
			stroke:#FFbbbb;
			fill:none;
		}

		.solidrepublican{
			stroke:#FF0000;
			fill:none;
		}



	</style>
</head>
<body>
</body>
<script type="text/javascript">

var height = 500, width = 500, margin = {top:20,left:20,bottom:20,right:20};

var hemicycleGroup = d3.select('body').append('svg').attr({
	width:500,
	height:500
}).append('g').attr({
	transform:'translate('+margin.top+','+margin.left+')'
})

var senateHemicycle = hemicycle().rows(4);

var senate = spreadsheet.senate.map(function(d){
	if(!d.cookpoliticalrating){
		d.cookpoliticalrating = {
			R:'noelectionrepublican',
			D:'noelectiondemocratic',
			I:'independent'
		}[d.party];
	}else{
		d.cookpoliticalrating = d.cookpoliticalrating.replace(' ','').toLowerCase();
	}
	return d;
})
console.log(senate);

senate = senate.sort(function(a,b){
	var order = ['noelectionrepublican','solidrepublican','likelyrepublican','leanrepublican','tossup','leandemocratic','likelydemocratic','soliddemocratic','noelectiondemocratic','independent'];
	return order.indexOf(a.cookpoliticalrating) - order.indexOf(b.cookpoliticalrating);
});

hemicycleGroup.selectAll('circle').data(senate)
	.call(senateHemicycle)
	.attr('class',function(d){
		return d.cookpoliticalrating;
	})
	.attr('id', function(d){
		return d.seatid
	});


hemicycleGroup.attr('transform','translate(220,20)')


</script>
</html>
hemicycle.js
content_copyfile_download
function hemicycle(){
	var rows = 4;
	var radialRange = [100, 200];
	var angularRange = [0, 180];

	function chart(g){
		var items = g[0].length;
		var columns = Math.ceil(items/rows -1);

		var radialScale = d3.scale.linear()
			.domain( [0, rows - 1] )
			.range( radialRange );

		var angularScale = d3.scale.linear()
			.domain( [0, columns ] )
			.range( angularRange );

		g.enter().append('circle').attr('r',5);

		g.attr('transform',function(d,i){
			var row = i % rows, column = Math.floor( i/rows );
			return 'rotate(' + angularScale(column) + ') translate(' + radialScale(row) + ',0)';
		})
	}

	chart.rows = function(r){
		rows = r;
		return chart;
	}

	chart.radialRange = function(r){
		radialRange = r;
		return chart;
	}

	chart.angularRange = function(r){
		angularRange = r;
		return chart;
	}

	return chart;
}