Skip to content

Instantly share code, notes, and snippets.

@jasondavies

jasondavies/index.html

Created October 27, 2011 14:45
Show Gist options
  • Save jasondavies/1319738 to your computer and use it in GitHub Desktop.
Save jasondavies/1319738 to your computer and use it in GitHub Desktop.
Download ZIP
Counties of the United Kingdom
Raw
index.html
<!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>
Raw
style.css
body {
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
rect {
fill: none;
pointer-events: all;
}
pre {
font-size: 18px;
}
line {
stroke: #000;
stroke-width: 1.5px;
}
Raw
uk-counties.csv
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