forked from jasondavies's block: Counties of the United Kingdom
Counties of the United Kingdom
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<link type="text/css" rel="stylesheet" href="style.css"/> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
<style type="text/css"> | |
body { text-align: center; } | |
p.source { font-style: italic; } | |
a { color: blue; } | |
svg { | |
display: block; | |
margin: auto; | |
} | |
text { | |
font-size: 11px; | |
} | |
rect { | |
fill: none; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Counties of the United Kingdom</h1> | |
<p>A demonstration of using CSV data for treemaps, at the request of <a href="https://github.com/blackbird25">blackbird25</a>. Click to zoom! | |
<div id="body"></div> | |
<p>Treemap zooming based on <a href="http://mbostock.github.com/d3/talk/20111018/#23">a slide</a> by <a href="http://bost.ocks.org/mike">Mike Bostock</a>. | |
<p class="source">Data source: <a href="http://blog.acmultimedia.co.uk/2007/09/list-of-uk-counties-in-sql-csv-format/">acmultimedia</a>. | |
<script type="text/javascript"> | |
var w = 960 - 80, | |
h = 500 - 180, | |
x = d3.scale.linear().range([0, w]), | |
y = d3.scale.linear().range([0, h]), | |
color = d3.scale.category20c(), | |
root, | |
node; | |
var treemap = d3.layout.treemap() | |
.round(false) | |
.size([w, h]) | |
.sticky(true) | |
.children(function(d) { return d.values; }) | |
.value(function(d) { return 1; }); | |
var svg = d3.select("#body").append("svg:svg") | |
.attr("width", w) | |
.attr("height", h) | |
.append("svg:g") | |
.attr("transform", "translate(.5,.5)"); | |
d3.csv("uk-counties.csv", function(data) { | |
node = root = {values: d3.nest() | |
.key(function(d) { return d.Country; }) | |
.rollup(function(d) { | |
return d.map(function(d) { | |
return {key: d.County}; | |
}); | |
}) | |
.entries(data)}; | |
var nodes = treemap.nodes(root) | |
.filter(function(d) { return !d.values; }); | |
var cell = svg.selectAll("g") | |
.data(nodes) | |
.enter().append("svg:g") | |
.attr("class", "cell") | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); }); | |
cell.append("svg:rect") | |
.attr("width", function(d) { return d.dx - 1; }) | |
.attr("height", function(d) { return d.dy - 1; }) | |
.style("fill", function(d) { return color(d.parent.key); }); | |
cell.append("svg:text") | |
.attr("x", function(d) { return d.dx / 2; }) | |
.attr("y", function(d) { return d.dy / 2; }) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "middle") | |
.text(function(d) { return d.key; }) | |
.style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; }); | |
d3.select(window).on("click", function() { zoom(root); }); | |
}); | |
function zoom(d) { | |
var kx = w / d.dx, ky = h / d.dy; | |
x.domain([d.x, d.x + d.dx]); | |
y.domain([d.y, d.y + d.dy]); | |
var t = svg.selectAll("g.cell").transition() | |
.duration(d3.event.altKey ? 7500 : 750) | |
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
t.select("rect") | |
.attr("width", function(d) { return kx * d.dx - 1; }) | |
.attr("height", function(d) { return ky * d.dy - 1; }) | |
t.select("text") | |
.attr("x", function(d) { return kx * d.dx / 2; }) | |
.attr("y", function(d) { return ky * d.dy / 2; }) | |
.style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; }); | |
node = d; | |
d3.event.stopPropagation(); | |
} | |
</script> | |
</body> | |
</html> |
Country | County | |
---|---|---|
England | London | |
England | Bedfordshire | |
England | Buckinghamshire | |
England | Cambridgeshire | |
England | Cheshire | |
England | Cornwall and Isles of Scilly | |
England | Cumbria | |
England | Derbyshire | |
England | Devon | |
England | Dorset | |
England | Durham | |
England | East Sussex | |
England | Essex | |
England | Gloucestershire | |
England | Greater London | |
England | Greater Manchester | |
England | Hampshire | |
England | Hertfordshire | |
England | Kent | |
England | Lancashire | |
England | Leicestershire | |
England | Lincolnshire | |
England | Merseyside | |
England | Norfolk | |
England | North Yorkshire | |
England | Northamptonshire | |
England | Northumberland | |
England | Nottinghamshire | |
England | Oxfordshire | |
England | Shropshire | |
England | Somerset | |
England | South Yorkshire | |
England | Staffordshire | |
England | Suffolk | |
England | Surrey | |
England | Tyne and Wear | |
England | Warwickshire | |
England | West Midlands | |
England | West Sussex | |
England | West Yorkshire | |
England | Wiltshire | |
England | Worcestershire | |
Wales | Flintshire | |
Wales | Glamorgan | |
Wales | Merionethshire | |
Wales | Monmouthshire | |
Wales | Montgomeryshire | |
Wales | Pembrokeshire | |
Wales | Radnorshire | |
Wales | Anglesey | |
Wales | Breconshire | |
Wales | Caernarvonshire | |
Wales | Cardiganshire | |
Wales | Carmarthenshire | |
Wales | Denbighshire | |
Scotland | Kirkcudbrightshire | |
Scotland | Lanarkshire | |
Scotland | Midlothian | |
Scotland | Moray | |
Scotland | Nairnshire | |
Scotland | Orkney | |
Scotland | Peebleshire | |
Scotland | Perthshire | |
Scotland | Renfrewshire | |
Scotland | Ross & Cromarty | |
Scotland | Roxburghshire | |
Scotland | Selkirkshire | |
Scotland | Shetland | |
Scotland | Stirlingshire | |
Scotland | Sutherland | |
Scotland | West Lothian | |
Scotland | Wigtownshire | |
Scotland | Aberdeenshire | |
Scotland | Angus | |
Scotland | Argyll | |
Scotland | Ayrshire | |
Scotland | Banffshire | |
Scotland | Berwickshire | |
Scotland | Bute | |
Scotland | Caithness | |
Scotland | Clackmannanshire | |
Scotland | Dumfriesshire | |
Scotland | Dumbartonshire | |
Scotland | East Lothian | |
Scotland | Fife | |
Scotland | Inverness | |
Scotland | Kincardineshire | |
Scotland | Kinross-shire |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment