Breaking down the pressures on energy bills

http://blogs.ft.com/ftdata/2013/10/10/breaking-down-the-pressures-on-energy-bills/

<html>
<head>
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
	<title>Energy Bill Breakdown</title>
	<style type="text/css">
		.baseline{
			stroke:#333;
			stroke-width: 1;
			shape-rendering: crispEdges;
		}

.changeline{
			stroke:#333;
			stroke-width: 0.5;
			stroke-dasharray:1,3;
		}
		text{
			font-family: sans-serif;
			fill: #666;
		}
		text.value{
			font-size: 0.65rem;
			fill:#777;
		}

rect{
			fill:#aaa;
			stroke:#999;
			stroke-width:1;
			shape-rendering: crispEdges;
		}
	</style>
</head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>

</body>
<script>
d3.csv('BillBreakdown.csv', function(data){
	console.log(data);
	var svg = d3.select('body').append('svg').attr('width',600).attr('height',600).append('g').attr('id','chart');
		svg.attr('transform', 'translate(300, 0)')
	var rowSpacing = 10;
	var yScale = d3.scale.linear().range([0,400]).domain([0,2000]);
	var yPos = 0;
	var enter = svg.selectAll('g.cost-item')
		.data(data)
		.enter();
	var blockWidth = 40;
	var centralColumnWidth = 50;
	
	var groups = enter.append('g')
		.attr('class',function(d){ return 'cost-item ' + 'group-'+toID(d.Item); })
		.attr('transform', function(d){
			yPos += (yScale(Math.max(d[2013], d[2014])) + rowSpacing)
			return 'translate(0,' + yPos + ')';
		})
	
	groups.append('rect')
		.attr('class', function(d){
			return 'rect-'+toID(d.Item);
		})
		.attr('height', function(d){
			return yScale(d[2013]);
		})
		.attr('y', function(d){
			return -yScale(d[2013]);
		})
		.attr('width', blockWidth);

groups.append('rect')
		.attr('class', function(d){
			return 'rect-'+toID(d.Item);
		})
		.attr('height', function(d){
			return yScale(d[2014]);
		})
		.attr('y', function(d){
			return -yScale(d[2014]);
		})
		.attr('x', centralColumnWidth + blockWidth)
		.attr('width', blockWidth);

groups.append('line').attr('class', 'baseline')
		.attr('x1', 0)
		.attr('x2', blockWidth*2 + centralColumnWidth)
		.attr('y1', 0)
		.attr('y2', 0);

groups.append('line').attr('class', 'changeline')
		.attr('x1', blockWidth)
		.attr('x2', blockWidth + centralColumnWidth)
		.attr('y1', function(d){
			return -yScale(d[2013]);
		})
		.attr('y2', function(d){
			return -yScale(d[2014]);
		});

groups.append('text')
		.text(function(d){
			return d.Item + ' ( +'+d['Change %']+'%)';
		})
		.attr('x', -10)
		.attr('y', -3)
		.attr('text-anchor','end');

groups.append('text')
		.text(function(d){
			return '£' + d[2013];
		})
		.attr('x', blockWidth + 3)
		.attr('y', -3)
		.attr('class','value');

groups.append('text')
		.text(function(d){
			return '£' + d[2014];
		})
		.attr('y', -3)
		.attr('x', blockWidth*2 + centralColumnWidth  + 3)
		.attr('class','value');

});

function toID(s){
	return s.split(' ').join('-');
}

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js