tomgp/BillBreakdown.csv

## readme.md

      
    Raw
  

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

  
## BillBreakdown.csv

          
            Item
            2013
            2014
            Change %

            
              Government schemes
              127
              144
              13

            
              Network Costs
              319
              350
              10

            
              VAT
              64
              69
              21

            
              Wholesale costs
              637
              662
              8

            
              Other supplier costs and margins
              127
              154
              4

## index.html
<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="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
Item	2013	2014	Change %
Government schemes	127	144	13
Network Costs	319	350	10
VAT	64	69	21
Wholesale costs	637	662	8
Other supplier costs and margins	127	154	4
	<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="http://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>