Skip to content

Instantly share code, notes, and snippets.

@tomgp

tomgp/BillBreakdown.csv

Last active December 25, 2015 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomgp/6975101 to your computer and use it in GitHub Desktop.
Save tomgp/6975101 to your computer and use it in GitHub Desktop.
Download ZIP
Breaking down the pressures on energy bills
Raw
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
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment