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